Skip to content

Commit 8e3ff6a

Browse files
mayank1513mayank1513
committed
Update examples
1 parent 1265bbf commit 8e3ff6a

File tree

9 files changed

+357
-1
lines changed

9 files changed

+357
-1
lines changed

‎examples/nextjs/src/app/local-color-switch.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { ColorSwitch, ThemeSwitcher } from "nthul";
2+
import { ServerTarget } from "nthul/dist/server";
3+
import styles from "./page.module.css";
4+
5+
const targetId = "simple-color-switch";
6+
export default function LocalColorSwitch() {
7+
return (
8+
<div className={styles.example}>
9+
<ServerTarget targetId={targetId} />
10+
<ThemeSwitcher targetId={targetId} />
11+
<header>
12+
<ColorSwitch targetId={targetId} size={24} />
13+
</header>
14+
<main>Simple dark/light scopped theme.</main>
15+
</div>
16+
);
17+
}

‎examples/nextjs/src/app/local-themes.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { ColorSwitch, ThemeSwitcher } from "nthul";
2+
import { ServerTarget } from "nthul/dist/server";
3+
import styles from "./page.module.css";
4+
import ThemesList from "./themes-list";
5+
6+
const targetId = "theme-switching";
7+
8+
export default function LocalThemes() {
9+
return (
10+
<div className={styles.example}>
11+
<ServerTarget targetId={targetId} />
12+
<ThemeSwitcher targetId={targetId} />
13+
<header>
14+
<ColorSwitch targetId={targetId} size={24} />
15+
</header>
16+
<main>
17+
Simple scoped multi-theme.
18+
<ThemesList targetId={targetId} />
19+
</main>
20+
</div>
21+
);
22+
}

‎examples/nextjs/src/app/page.module.css‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
.globalThemes,
2+
.localThemes {
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
gap: 50px;
7+
padding: 20px;
8+
box-shadow: 0 0 10px gray;
9+
width: var(--max-width);
10+
max-width: 90vw;
11+
margin: 40px auto;
12+
border-radius: 20px;
13+
flex-wrap: wrap;
14+
}
15+
16+
.example {
17+
border-radius: 10px;
18+
box-shadow: 0 0 10px gray;
19+
overflow: hidden;
20+
background: var(--bg-color);
21+
}
22+
23+
.example * {
24+
background: var(--bg-color);
25+
}
26+
27+
.example header {
28+
padding: 10px;
29+
text-align: end;
30+
}
31+
32+
.example main {
33+
width: 300px;
34+
height: 100px;
35+
padding: 10px;
36+
}
37+
38+
.themes {
39+
--bg1: var(--bg-dark);
40+
--bg2: var(--bg-light);
41+
list-style-type: none;
42+
padding: 10px;
43+
display: flex;
44+
gap: 30px;
45+
justify-content: space-evenly;
46+
align-items: center;
47+
flex-wrap: wrap;
48+
max-width: 400px;
49+
margin: auto;
50+
}
51+
52+
.themes button {
53+
height: 30px;
54+
width: 30px;
55+
border-radius: 5px;
56+
background: linear-gradient(-45deg, var(--bg1), var(--bg1) 45%, var(--bg2) 55%, var(--bg2));
57+
box-shadow: 0 0 10px gray;
58+
cursor: pointer;
59+
}
60+
61+
.theme1 {
62+
--bg1: var(--th1-bg-dark);
63+
--bg2: var(--th1-bg-light);
64+
}
65+
66+
.theme2 {
67+
--bg1: var(--th2-bg-dark);
68+
--bg2: var(--th2-bg-light);
69+
}

‎examples/nextjs/src/app/page.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import { LandingPage } from "@repo/shared/dist/server";
22
import { Demo } from "@repo/shared";
3+
import ThemesList from "./themes-list";
4+
import styles from "./page.module.css";
5+
import LocalColorSwitch from "./local-color-switch";
6+
import LocalThemes from "./local-themes";
7+
import { ColorSwitch } from "nthul";
38

49
export const metadata = {
510
title: "React 18 Loaders",
@@ -9,7 +14,16 @@ export const metadata = {
914
export default function Page(): JSX.Element {
1015
return (
1116
<LandingPage title="Next.js Example">
12-
<Demo />
17+
<div className={styles.globalThemes}>
18+
<h2>Apply Themes Globally</h2>
19+
<ThemesList />
20+
<ColorSwitch size={24} />
21+
</div>
22+
<div className={styles.localThemes}>
23+
<h2>Apply Themes Locally</h2>
24+
<LocalColorSwitch />
25+
<LocalThemes />
26+
</div>
1327
</LandingPage>
1428
);
1529
}

‎examples/nextjs/src/app/themes-list.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { ThemeButton } from "@repo/shared/dist/client/theme-button";
2+
import styles from "./page.module.css";
3+
4+
const themes = ["", "theme1", "theme2"];
5+
6+
export default function ThemesList({ targetId }: { targetId?: string }) {
7+
return (
8+
<ul className={styles.themes}>
9+
{themes.map(th => (
10+
<ThemeButton key={th} {...{ targetId, th, styles }} />
11+
))}
12+
</ul>
13+
);
14+
}

‎packages/shared/src/client/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
*/
88

99
// client component exports
10+
export * from "./theme-button";
1011
export * from "./demo";
1112
export * from "./header";
1213
export * from "./global-loader";

‎packages/shared/src/client/theme-button/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
"use client";
2+
3+
// component exports
4+
export * from "./theme-button";

‎packages/shared/src/client/theme-button/theme-button.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { HTMLProps } from "react";
2+
import { useTheme } from "nthul/dist/hooks";
3+
4+
export interface ThemeButtonProps extends HTMLProps<HTMLLIElement> {
5+
th: string;
6+
targetId?: string;
7+
styles: Record<string, string>;
8+
}
9+
10+
/**
11+
*
12+
*
13+
* @example
14+
* ```tsx
15+
* <ThemeButton />
16+
* ```
17+
*
18+
* @source - Source code
19+
*/
20+
export const ThemeButton = ({ targetId, th, styles, ...props }: ThemeButtonProps) => {
21+
const { setTheme } = useTheme(targetId);
22+
return (
23+
<li {...props}>
24+
<button
25+
className={styles[th]}
26+
onClick={() => {
27+
setTheme(th);
28+
}}
29+
type="button"
30+
/>
31+
</li>
32+
);
33+
};

‎packages/shared/src/global.scss‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,187 @@
11
@import "@mayank1513/fork-me/index.css";
22

3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
:root {
8+
/* colors */
9+
--bg-light: #fff;
10+
--color-light: #000;
11+
--bg-dark: #000;
12+
--color-dark: #fff;
13+
14+
--th1-bg-light: #aaf;
15+
--th1-color-light: #00f;
16+
--th1-bg-dark: #008;
17+
--th1-color-dark: #aaf;
18+
19+
--th2-bg-light: #faa;
20+
--th2-color-light: #f00;
21+
--th2-bg-dark: #800;
22+
--th2-color-dark: #fbb;
23+
24+
/* root style variables */
25+
--max-width: 1100px;
26+
--border-radius: 12px;
27+
--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
28+
"Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono",
29+
"Courier New", monospace;
30+
--bg-color: var(--bg-light);
31+
--text-color: var(--color-light);
32+
33+
--primary-glow: conic-gradient(
34+
from 180deg at 50% 50%,
35+
#16abff33 0deg,
36+
#0885ff33 55deg,
37+
#54d6ff33 120deg,
38+
#0071ff33 160deg,
39+
transparent 360deg
40+
);
41+
--secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
42+
43+
--callout-rgb: 238, 240, 241;
44+
--callout-border-rgb: 172, 175, 176;
45+
--card-rgb: 180, 185, 188;
46+
--card-border-rgb: 131, 134, 135;
47+
--tile-border: conic-gradient(
48+
#00000080,
49+
#00000040,
50+
#00000030,
51+
#00000020,
52+
#00000010,
53+
#00000010,
54+
#00000080
55+
);
56+
}
57+
58+
.dark,
59+
.dark ~ * {
60+
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
61+
--secondary-glow: linear-gradient(
62+
to bottom right,
63+
rgba(1, 65, 255, 0),
64+
rgba(1, 65, 255, 0),
65+
rgba(1, 65, 255, 0.3)
66+
);
67+
68+
--callout-rgb: 20, 20, 20;
69+
--callout-border-rgb: 108, 108, 108;
70+
--card-rgb: 100, 100, 100;
71+
--card-border-rgb: 200, 200, 200;
72+
--tile-border: conic-gradient(
73+
#ffffff80,
74+
#ffffff40,
75+
#ffffff30,
76+
#ffffff20,
77+
#ffffff10,
78+
#ffffff10,
79+
#ffffff80
80+
);
81+
}
82+
83+
/* dark themes */
84+
.th-.dark,
85+
.th-.dark *,
86+
.th-.dark ~ *,
87+
.th-.dark ~ * *,
88+
/* for increased specificity of localized themes */
89+
.nth-scoped.th-.dark,
90+
.nth-scoped.th-.dark *,
91+
.nth-scoped.th-.dark ~ *,
92+
.nth-scoped.th-.dark ~ * * {
93+
--bg-color: var(--bg-dark);
94+
--text-color: var(--color-dark);
95+
}
96+
97+
/* light themes */
98+
.th-.light,
99+
.th-.light *,
100+
.th-.light ~ *,
101+
.th-.light ~ * *,
102+
/* for increased specificity of localized themes */
103+
.nth-scoped.th-.light,
104+
.nth-scoped.th-.light *,
105+
.nth-scoped.th-.light ~ *,
106+
.nth-scoped.th-.light ~ * * {
107+
--bg-color: var(--bg-light);
108+
--text-color: var(--color-light);
109+
}
110+
111+
.th-theme1.light ~ *,
112+
.th-theme1.light ~ * *,
113+
/* for increased specificity of localized themes */
114+
.nth-scoped.th-theme1.light ~ *,
115+
.nth-scoped.th-theme1.light ~ * * {
116+
--bg-color: var(--th1-bg-light);
117+
--text-color: var(--th1-color-light);
118+
}
119+
120+
.th-theme1.dark ~ *,
121+
.th-theme1.dark ~ * * ,
122+
/* for increased specificity of localized themes */
123+
.nth-scoped.th-theme1.dark ~ *,
124+
.nth-scoped.th-theme1.dark ~ * * {
125+
--bg-color: var(--th1-bg-dark);
126+
--text-color: var(--th1-color-dark);
127+
}
128+
129+
.th-theme2.light ~ *,
130+
.th-theme2.light ~ * *,
131+
/* for increased specificity of localized themes */
132+
.nth-scoped.th-theme2.light ~ *,
133+
.nth-scoped.th-theme2.light ~ * * {
134+
--bg-color: var(--th2-bg-light);
135+
--text-color: var(--th2-color-light);
136+
}
137+
138+
.th-theme2.dark ~ *,
139+
.th-theme2.dark ~ * *,
140+
/* for increased specificity of localized themes */
141+
.nth-scoped.th-theme2.dark ~ *,
142+
.nth-scoped.th-theme2.dark ~ * * {
143+
--bg-color: var(--th2-bg-dark);
144+
--text-color: var(--th2-color-dark);
145+
}
146+
147+
html {
148+
padding: 0;
149+
margin: 0;
150+
}
151+
152+
body,
153+
#root {
154+
padding: 0;
155+
margin: 0;
156+
min-height: 100vh;
157+
display: flex;
158+
flex-direction: column;
159+
}
160+
161+
main,
162+
footer {
163+
background: var(--bg-color);
164+
color: var(--text-color);
165+
}
166+
167+
main {
168+
flex-grow: 1;
169+
}
170+
171+
footer {
172+
text-align: center;
173+
padding: 10px;
174+
}
175+
176+
a {
177+
color: inherit;
178+
text-decoration: none;
179+
}
180+
181+
.grow {
182+
flex-grow: 1;
183+
}
184+
3185
* {
4186
box-sizing: border-box;
5187
transition: all 0.3s;

0 commit comments

Comments
 (0)