naria-ui 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/globals.css +0 -42
- package/app/page.module.css +0 -167
- package/app/page.tsx +1 -90
- package/components/button/Button.tsx +2 -2
- package/components/button/index.tsx +5 -0
- package/package.json +1 -1
- package/app/favicon.ico +0 -0
package/app/globals.css
CHANGED
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--background: #ffffff;
|
|
3
|
-
--foreground: #171717;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
@media (prefers-color-scheme: dark) {
|
|
7
|
-
:root {
|
|
8
|
-
--background: #0a0a0a;
|
|
9
|
-
--foreground: #ededed;
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
html,
|
|
14
|
-
body {
|
|
15
|
-
max-width: 100vw;
|
|
16
|
-
overflow-x: hidden;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
body {
|
|
20
|
-
color: var(--foreground);
|
|
21
|
-
background: var(--background);
|
|
22
|
-
font-family: Arial, Helvetica, sans-serif;
|
|
23
|
-
-webkit-font-smoothing: antialiased;
|
|
24
|
-
-moz-osx-font-smoothing: grayscale;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
* {
|
|
28
|
-
box-sizing: border-box;
|
|
29
|
-
padding: 0;
|
|
30
|
-
margin: 0;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
a {
|
|
34
|
-
color: inherit;
|
|
35
|
-
text-decoration: none;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
@media (prefers-color-scheme: dark) {
|
|
39
|
-
html {
|
|
40
|
-
color-scheme: dark;
|
|
41
|
-
}
|
|
42
|
-
}
|
package/app/page.module.css
CHANGED
|
@@ -1,167 +0,0 @@
|
|
|
1
|
-
.page {
|
|
2
|
-
--gray-rgb: 0, 0, 0;
|
|
3
|
-
--gray-alpha-200: rgba(var(--gray-rgb), 0.08);
|
|
4
|
-
--gray-alpha-100: rgba(var(--gray-rgb), 0.05);
|
|
5
|
-
|
|
6
|
-
--button-primary-hover: #383838;
|
|
7
|
-
--button-secondary-hover: #f2f2f2;
|
|
8
|
-
|
|
9
|
-
display: grid;
|
|
10
|
-
grid-template-rows: 20px 1fr 20px;
|
|
11
|
-
align-items: center;
|
|
12
|
-
justify-items: center;
|
|
13
|
-
min-height: 100svh;
|
|
14
|
-
padding: 80px;
|
|
15
|
-
gap: 64px;
|
|
16
|
-
font-family: var(--font-geist-sans);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
@media (prefers-color-scheme: dark) {
|
|
20
|
-
.page {
|
|
21
|
-
--gray-rgb: 255, 255, 255;
|
|
22
|
-
--gray-alpha-200: rgba(var(--gray-rgb), 0.145);
|
|
23
|
-
--gray-alpha-100: rgba(var(--gray-rgb), 0.06);
|
|
24
|
-
|
|
25
|
-
--button-primary-hover: #ccc;
|
|
26
|
-
--button-secondary-hover: #1a1a1a;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.main {
|
|
31
|
-
display: flex;
|
|
32
|
-
flex-direction: column;
|
|
33
|
-
gap: 32px;
|
|
34
|
-
grid-row-start: 2;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.main ol {
|
|
38
|
-
font-family: var(--font-geist-mono);
|
|
39
|
-
padding-left: 0;
|
|
40
|
-
margin: 0;
|
|
41
|
-
font-size: 14px;
|
|
42
|
-
line-height: 24px;
|
|
43
|
-
letter-spacing: -0.01em;
|
|
44
|
-
list-style-position: inside;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.main li:not(:last-of-type) {
|
|
48
|
-
margin-bottom: 8px;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.main code {
|
|
52
|
-
font-family: inherit;
|
|
53
|
-
background: var(--gray-alpha-100);
|
|
54
|
-
padding: 2px 4px;
|
|
55
|
-
border-radius: 4px;
|
|
56
|
-
font-weight: 600;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.ctas {
|
|
60
|
-
display: flex;
|
|
61
|
-
gap: 16px;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.ctas a {
|
|
65
|
-
appearance: none;
|
|
66
|
-
border-radius: 128px;
|
|
67
|
-
height: 48px;
|
|
68
|
-
padding: 0 20px;
|
|
69
|
-
border: 1px solid transparent;
|
|
70
|
-
transition:
|
|
71
|
-
background 0.2s,
|
|
72
|
-
color 0.2s,
|
|
73
|
-
border-color 0.2s;
|
|
74
|
-
cursor: pointer;
|
|
75
|
-
display: flex;
|
|
76
|
-
align-items: center;
|
|
77
|
-
justify-content: center;
|
|
78
|
-
font-size: 16px;
|
|
79
|
-
line-height: 20px;
|
|
80
|
-
font-weight: 500;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
a.primary {
|
|
84
|
-
background: var(--foreground);
|
|
85
|
-
color: var(--background);
|
|
86
|
-
gap: 8px;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
a.secondary {
|
|
90
|
-
border-color: var(--gray-alpha-200);
|
|
91
|
-
min-width: 158px;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.footer {
|
|
95
|
-
grid-row-start: 3;
|
|
96
|
-
display: flex;
|
|
97
|
-
gap: 24px;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.footer a {
|
|
101
|
-
display: flex;
|
|
102
|
-
align-items: center;
|
|
103
|
-
gap: 8px;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.footer img {
|
|
107
|
-
flex-shrink: 0;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
/* Enable hover only on non-touch devices */
|
|
111
|
-
@media (hover: hover) and (pointer: fine) {
|
|
112
|
-
a.primary:hover {
|
|
113
|
-
background: var(--button-primary-hover);
|
|
114
|
-
border-color: transparent;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
a.secondary:hover {
|
|
118
|
-
background: var(--button-secondary-hover);
|
|
119
|
-
border-color: transparent;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
.footer a:hover {
|
|
123
|
-
text-decoration: underline;
|
|
124
|
-
text-underline-offset: 4px;
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
@media (max-width: 600px) {
|
|
129
|
-
.page {
|
|
130
|
-
padding: 32px;
|
|
131
|
-
padding-bottom: 80px;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
.main {
|
|
135
|
-
align-items: center;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.main ol {
|
|
139
|
-
text-align: center;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
.ctas {
|
|
143
|
-
flex-direction: column;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.ctas a {
|
|
147
|
-
font-size: 14px;
|
|
148
|
-
height: 40px;
|
|
149
|
-
padding: 0 16px;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
a.secondary {
|
|
153
|
-
min-width: auto;
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
.footer {
|
|
157
|
-
flex-wrap: wrap;
|
|
158
|
-
align-items: center;
|
|
159
|
-
justify-content: center;
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
@media (prefers-color-scheme: dark) {
|
|
164
|
-
.logo {
|
|
165
|
-
filter: invert();
|
|
166
|
-
}
|
|
167
|
-
}
|
package/app/page.tsx
CHANGED
|
@@ -1,95 +1,6 @@
|
|
|
1
|
-
import Image from "next/image";
|
|
2
|
-
import styles from "./page.module.css";
|
|
3
1
|
|
|
4
2
|
export default function Home() {
|
|
5
3
|
return (
|
|
6
|
-
|
|
7
|
-
<main className={styles.main}>
|
|
8
|
-
<Image
|
|
9
|
-
className={styles.logo}
|
|
10
|
-
src="/next.svg"
|
|
11
|
-
alt="Next.js logo"
|
|
12
|
-
width={180}
|
|
13
|
-
height={38}
|
|
14
|
-
priority
|
|
15
|
-
/>
|
|
16
|
-
<ol>
|
|
17
|
-
<li>
|
|
18
|
-
Get started by editing <code>app/page.tsx</code>.
|
|
19
|
-
</li>
|
|
20
|
-
<li>Save and see your changes instantly.</li>
|
|
21
|
-
</ol>
|
|
22
|
-
|
|
23
|
-
<div className={styles.ctas}>
|
|
24
|
-
<a
|
|
25
|
-
className={styles.primary}
|
|
26
|
-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
27
|
-
target="_blank"
|
|
28
|
-
rel="noopener noreferrer"
|
|
29
|
-
>
|
|
30
|
-
<Image
|
|
31
|
-
className={styles.logo}
|
|
32
|
-
src="/vercel.svg"
|
|
33
|
-
alt="Vercel logomark"
|
|
34
|
-
width={20}
|
|
35
|
-
height={20}
|
|
36
|
-
/>
|
|
37
|
-
Deploy now
|
|
38
|
-
</a>
|
|
39
|
-
<a
|
|
40
|
-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
41
|
-
target="_blank"
|
|
42
|
-
rel="noopener noreferrer"
|
|
43
|
-
className={styles.secondary}
|
|
44
|
-
>
|
|
45
|
-
Read our docs
|
|
46
|
-
</a>
|
|
47
|
-
</div>
|
|
48
|
-
</main>
|
|
49
|
-
<footer className={styles.footer}>
|
|
50
|
-
<a
|
|
51
|
-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
52
|
-
target="_blank"
|
|
53
|
-
rel="noopener noreferrer"
|
|
54
|
-
>
|
|
55
|
-
<Image
|
|
56
|
-
aria-hidden
|
|
57
|
-
src="/file.svg"
|
|
58
|
-
alt="File icon"
|
|
59
|
-
width={16}
|
|
60
|
-
height={16}
|
|
61
|
-
/>
|
|
62
|
-
Learn
|
|
63
|
-
</a>
|
|
64
|
-
<a
|
|
65
|
-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
66
|
-
target="_blank"
|
|
67
|
-
rel="noopener noreferrer"
|
|
68
|
-
>
|
|
69
|
-
<Image
|
|
70
|
-
aria-hidden
|
|
71
|
-
src="/window.svg"
|
|
72
|
-
alt="Window icon"
|
|
73
|
-
width={16}
|
|
74
|
-
height={16}
|
|
75
|
-
/>
|
|
76
|
-
Examples
|
|
77
|
-
</a>
|
|
78
|
-
<a
|
|
79
|
-
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
|
80
|
-
target="_blank"
|
|
81
|
-
rel="noopener noreferrer"
|
|
82
|
-
>
|
|
83
|
-
<Image
|
|
84
|
-
aria-hidden
|
|
85
|
-
src="/globe.svg"
|
|
86
|
-
alt="Globe icon"
|
|
87
|
-
width={16}
|
|
88
|
-
height={16}
|
|
89
|
-
/>
|
|
90
|
-
Go to nextjs.org →
|
|
91
|
-
</a>
|
|
92
|
-
</footer>
|
|
93
|
-
</div>
|
|
4
|
+
<></>
|
|
94
5
|
);
|
|
95
6
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import React, {FC} from "react";
|
|
3
3
|
import Loading from "@/components/shared/loading/Loading";
|
|
4
4
|
|
|
5
|
-
export interface
|
|
5
|
+
export interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
|
|
6
6
|
type?: "button" | "submit";
|
|
7
7
|
classNames?: string;
|
|
8
8
|
value: string;
|
|
@@ -13,7 +13,7 @@ export interface props extends React.DetailedHTMLProps<React.ButtonHTMLAttribute
|
|
|
13
13
|
icon?: HTMLElement | undefined;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
const Button: FC<
|
|
16
|
+
const Button: FC<ButtonProps> = ({
|
|
17
17
|
type = "button", classNames = "",
|
|
18
18
|
value, theme = "btn-primary", size = "btn-md",
|
|
19
19
|
icon = undefined,
|
package/package.json
CHANGED
package/app/favicon.ico
DELETED
|
Binary file
|