Skip to content

Commit befd456

Browse files
TheOrcDevTheOrcDev
authored
feat(registry) new mode switcher component (#400)
1 parent f89d03f commit befd456

File tree

6 files changed

+265
-1
lines changed

6 files changed

+265
-1
lines changed

‎app/docs/components/retro-mode-switcher/page.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { Metadata } from "next";
2+
3+
import { RetroModeSwitcher } from "@/components/ui/retro-mode-switcher";
4+
import { Separator } from "@/components/ui/separator";
5+
6+
import CodeSnippet from "../code-snippet";
7+
import CopyCommandButton from "../copy-command-button";
8+
import InstallationCommands from "../installation-commands";
9+
10+
export const metadata: Metadata = {
11+
title: "8-bit Retro Mode Switcher",
12+
description:
13+
"A retro-styled theme toggle component with pixel art sun and moon icons. Perfect for 8-bit themed applications that need a nostalgic theme switcher.",
14+
};
15+
16+
export default function RetroModeSwitcherPage() {
17+
return (
18+
<div className="flex flex-col gap-4">
19+
<div className="flex flex-col md:flex-row items-center justify-between gap-2">
20+
<h1 className="text-3xl font-bold">Retro Mode Switcher</h1>
21+
<CopyCommandButton
22+
copyCommand="pnpm dlx shadcn@latest add @8bitcn/retro-mode-switcher"
23+
command="pnpm dlx shadcn@latest add @8bitcn/retro-mode-switcher"
24+
/>
25+
</div>
26+
27+
<p className="text-muted-foreground">
28+
A retro-styled theme toggle component with pixel art sun and moon icons.
29+
Perfect for 8-bit themed applications that need a nostalgic theme
30+
switcher.
31+
</p>
32+
33+
<div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px] relative">
34+
<div className="flex items-center justify-between">
35+
<h2 className="text-sm text-muted-foreground sm:pl-3">
36+
8-bit retro mode switcher component
37+
</h2>
38+
</div>
39+
<div className="flex items-center justify-center min-h-[400px] relative">
40+
<div className="flex flex-col items-center gap-6">
41+
<div className="flex items-center gap-4">
42+
<RetroModeSwitcher />
43+
<span className="text-sm text-muted-foreground">
44+
Click to toggle between light and dark themes
45+
</span>
46+
</div>
47+
</div>
48+
</div>
49+
</div>
50+
51+
<h3 className="text-lg font-bold">Installation</h3>
52+
53+
<Separator />
54+
55+
<InstallationCommands packageName="retro-mode-switcher" />
56+
57+
<h3 className="text-lg font-bold mt-10">Usage</h3>
58+
59+
<Separator />
60+
61+
<CodeSnippet>{`import { RetroModeSwitcher } from "@/components/ui/retro-mode-switcher"`}</CodeSnippet>
62+
63+
<CodeSnippet>{`<RetroModeSwitcher />`}</CodeSnippet>
64+
</div>
65+
);
66+
}

‎components/mode-switcher.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export function ModeSwitcher() {
1717
return (
1818
<Button
1919
variant="ghost"
20-
className="group/toggle h-8 w-8 px-0"
20+
className="group/toggle size-8 px-0"
2121
onClick={toggleTheme}
2222
>
2323
<SunIcon className="hidden [html.dark_&]:block" />

‎components/ui/retro-mode-switcher.tsx‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
"use client";
2+
3+
import * as React from "react";
4+
5+
import { useTheme } from "next-themes";
6+
7+
import { Button } from "@/components/ui/8bit/button";
8+
9+
export function RetroModeSwitcher() {
10+
const { setTheme, resolvedTheme } = useTheme();
11+
12+
const toggleTheme = React.useCallback(() => {
13+
setTheme(resolvedTheme === "dark" ? "light" : "dark");
14+
}, [resolvedTheme, setTheme]);
15+
16+
return (
17+
<Button
18+
variant="ghost"
19+
className="group/toggle h-8 w-8 px-0"
20+
onClick={toggleTheme}
21+
>
22+
<svg
23+
width="50"
24+
height="50"
25+
viewBox="0 0 256 256"
26+
fill="currentColor"
27+
xmlns="http://www.w3.org/2000/svg"
28+
stroke="currentColor"
29+
strokeWidth="0.25"
30+
className="size-8 hidden [html.dark_&]:block"
31+
aria-label="sun-dim"
32+
>
33+
<rect x="120" y="88" width="14" height="14" rx="1"></rect>
34+
<rect x="104" y="88" width="14" height="14" rx="1"></rect>
35+
<rect x="88" y="104" width="14" height="14" rx="1"></rect>
36+
<rect x="88" y="120" width="14" height="14" rx="1"></rect>
37+
<rect x="88" y="136" width="14" height="14" rx="1"></rect>
38+
<rect x="136" y="88" width="14" height="14" rx="1"></rect>
39+
<rect x="120" y="152" width="14" height="14" rx="1"></rect>
40+
<rect x="104" y="152" width="14" height="14" rx="1"></rect>
41+
<rect x="136" y="152" width="14" height="14" rx="1"></rect>
42+
<rect x="152" y="104" width="14" height="14" rx="1"></rect>
43+
<rect x="168" y="72" width="14" height="14" rx="1"></rect>
44+
<rect x="168" y="168" width="14" height="14" rx="1"></rect>
45+
<rect x="72" y="168" width="14" height="14" rx="1"></rect>
46+
<rect x="72" y="72" width="14" height="14" rx="1"></rect>
47+
<rect x="120" y="56" width="14" height="14" rx="1"></rect>
48+
<rect x="56" y="120" width="14" height="14" rx="1"></rect>
49+
<rect x="120" y="184" width="14" height="14" rx="1"></rect>
50+
<rect x="184" y="120" width="14" height="14" rx="1"></rect>
51+
<rect x="40" y="120" width="14" height="14" rx="1"></rect>
52+
<rect x="120" y="40" width="14" height="14" rx="1"></rect>
53+
<rect x="120" y="200" width="14" height="14" rx="1"></rect>
54+
<rect x="184" y="184" width="14" height="14" rx="1"></rect>
55+
<rect x="56" y="184" width="14" height="14" rx="1"></rect>
56+
<rect x="184" y="56" width="14" height="14" rx="1"></rect>
57+
<rect x="56" y="56" width="14" height="14" rx="1"></rect>
58+
<rect x="200" y="120" width="14" height="14" rx="1"></rect>
59+
<rect x="152" y="120" width="14" height="14" rx="1"></rect>
60+
<rect x="152" y="136" width="14" height="14" rx="1"></rect>
61+
</svg>
62+
<svg
63+
width="50"
64+
height="50"
65+
viewBox="0 0 256 256"
66+
fill="currentColor"
67+
xmlns="http://www.w3.org/2000/svg"
68+
stroke="currentColor"
69+
strokeWidth="0.25"
70+
className="hidden [html.light_&]:block size-8"
71+
aria-label="moon"
72+
>
73+
<rect x="104" y="56" width="14" height="14" rx="1"></rect>
74+
<rect x="88" y="56" width="14" height="14" rx="1"></rect>
75+
<rect x="72" y="72" width="14" height="14" rx="1"></rect>
76+
<rect x="88" y="72" width="14" height="14" rx="1"></rect>
77+
<rect x="88" y="88" width="14" height="14" rx="1"></rect>
78+
<rect x="72" y="88" width="14" height="14" rx="1"></rect>
79+
<rect x="56" y="104" width="14" height="14" rx="1"></rect>
80+
<rect x="88" y="104" width="14" height="14" rx="1"></rect>
81+
<rect x="72" y="104" width="14" height="14" rx="1"></rect>
82+
<rect x="56" y="136" width="14" height="14" rx="1"></rect>
83+
<rect x="88" y="136" width="14" height="14" rx="1"></rect>
84+
<rect x="72" y="136" width="14" height="14" rx="1"></rect>
85+
<rect x="56" y="120" width="14" height="14" rx="1"></rect>
86+
<rect x="88" y="120" width="14" height="14" rx="1"></rect>
87+
<rect x="104" y="120" width="14" height="14" rx="1"></rect>
88+
<rect x="72" y="120" width="14" height="14" rx="1"></rect>
89+
<rect x="88" y="56" width="14" height="14" rx="1"></rect>
90+
<rect x="104" y="136" width="14" height="14" rx="1"></rect>
91+
<rect x="72" y="152" width="14" height="14" rx="1"></rect>
92+
<rect x="104" y="152" width="14" height="14" rx="1"></rect>
93+
<rect x="120" y="136" width="14" height="14" rx="1"></rect>
94+
<rect x="88" y="152" width="14" height="14" rx="1"></rect>
95+
<rect x="168" y="152" width="14" height="14" rx="1"></rect>
96+
<rect x="184" y="136" width="14" height="14" rx="1"></rect>
97+
<rect x="120" y="152" width="14" height="14" rx="1"></rect>
98+
<rect x="152" y="152" width="14" height="14" rx="1"></rect>
99+
<rect x="136" y="152" width="14" height="14" rx="1"></rect>
100+
<rect x="72" y="168" width="14" height="14" rx="1"></rect>
101+
<rect x="104" y="168" width="14" height="14" rx="1"></rect>
102+
<rect x="88" y="168" width="14" height="14" rx="1"></rect>
103+
<rect x="168" y="168" width="14" height="14" rx="1"></rect>
104+
<rect x="120" y="168" width="14" height="14" rx="1"></rect>
105+
<rect x="152" y="168" width="14" height="14" rx="1"></rect>
106+
<rect x="136" y="168" width="14" height="14" rx="1"></rect>
107+
<rect x="104" y="184" width="14" height="14" rx="1"></rect>
108+
<rect x="120" y="184" width="14" height="14" rx="1"></rect>
109+
<rect x="136" y="184" width="14" height="14" rx="1"></rect>
110+
<rect x="184" y="152" width="14" height="14" rx="1"></rect>
111+
</svg>
112+
<span className="sr-only">Toggle theme</span>
113+
</Button>
114+
);
115+
}

‎public/r/registry.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1759,6 +1759,31 @@
17591759
"target": "app/retro-globals.css"
17601760
}
17611761
]
1762+
},
1763+
{
1764+
"name": "retro-mode-switcher",
1765+
"type": "registry:component",
1766+
"title": "8-bit Retro Mode Switcher",
1767+
"description": "A retro-styled theme toggle component with pixel art sun and moon icons. Perfect for 8-bit themed applications that need a nostalgic theme switcher.",
1768+
"registryDependencies": ["button"],
1769+
"dependencies": ["next-themes"],
1770+
"files": [
1771+
{
1772+
"path": "components/ui/retro-mode-switcher.tsx",
1773+
"type": "registry:component",
1774+
"target": "components/ui/retro-mode-switcher.tsx"
1775+
},
1776+
{
1777+
"path": "components/ui/8bit/button.tsx",
1778+
"type": "registry:component",
1779+
"target": "components/ui/8bit/button.tsx"
1780+
},
1781+
{
1782+
"path": "components/ui/8bit/styles/retro.css",
1783+
"type": "registry:component",
1784+
"target": "components/ui/8bit/styles/retro.css"
1785+
}
1786+
]
17621787
}
17631788
]
17641789
}

0 commit comments

Comments
 (0)