Listen to and share the music in the Atmosphere.
musicsky.up.railway.app/
nextjs
atproto
music
typescript
react
feat: make theme toggle look like link in main layout
Signed-off-by: mejsiejdev <mejsiejdev@gmail.com>
authored by
mejsiejdev
and committed by
tangled.org
f0bb2b55
53dce02c
+28
-11
+2
-2
apps/web/src/app/(main)/layout.tsx
+2
-2
apps/web/src/app/(main)/layout.tsx
···
19
19
<div className="flex flex-col gap-4">
20
20
<div className="space-y-2">
21
21
<div className="flex flex-row items-baseline justify-between">
22
-
<h1 className="text-3xl font-bold text-primary">MusicSky</h1>
23
-
<ThemeToggle />
22
+
<h1 className="text-3xl font-bold text-primary">Musicsky</h1>
24
23
</div>
25
24
<h2 className="text-sm text-muted-foreground">
26
25
Listen and share the music in the Atmosphere.
···
49
48
Source
50
49
</a>
51
50
</Button>
51
+
<ThemeToggle variant="nav" />
52
52
</div>
53
53
</div>
54
54
<div className="flex flex-col gap-4">
+26
-9
apps/web/src/components/theme-toggle.tsx
+26
-9
apps/web/src/components/theme-toggle.tsx
···
1
1
"use client";
2
2
3
-
import { Moon, Sun } from "lucide-react";
3
+
import { Monitor, Moon, Sun } from "lucide-react";
4
4
import { useTheme } from "next-themes";
5
5
6
6
import { Button } from "@/components/ui/button";
···
11
11
DropdownMenuTrigger,
12
12
} from "@/components/ui/dropdown-menu";
13
13
14
-
export function ThemeToggle() {
15
-
const { setTheme } = useTheme();
14
+
const themeLabels: Record<string, string> = {
15
+
light: "Light",
16
+
dark: "Dark",
17
+
system: "System",
18
+
};
19
+
20
+
export function ThemeToggle({ variant = "icon" }: { variant?: "icon" | "nav" }) {
21
+
const { theme, setTheme } = useTheme();
22
+
23
+
const label = themeLabels[theme ?? "system"] ?? "System";
16
24
17
25
return (
18
26
<DropdownMenu>
19
27
<DropdownMenuTrigger asChild>
20
-
<Button variant="outline" size="icon" className="rounded-full">
21
-
<Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
22
-
<Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
23
-
<span className="sr-only">Toggle theme</span>
24
-
</Button>
28
+
{variant === "nav" ? (
29
+
<Button variant="ghost" className="justify-start">
30
+
{theme === "light" && <Sun className="h-[1.2rem] w-[1.2rem]" />}
31
+
{theme === "dark" && <Moon className="h-[1.2rem] w-[1.2rem]" />}
32
+
{(theme === "system" || !theme) && <Monitor className="h-[1.2rem] w-[1.2rem]" />}
33
+
Theme: {label}
34
+
</Button>
35
+
) : (
36
+
<Button variant="outline" size="icon" className="rounded-full">
37
+
<Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
38
+
<Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
39
+
<span className="sr-only">Toggle theme</span>
40
+
</Button>
41
+
)}
25
42
</DropdownMenuTrigger>
26
-
<DropdownMenuContent align="end">
43
+
<DropdownMenuContent side={variant === "nav" ? "right" : "bottom"} align={variant === "nav" ? "start" : "end"}>
27
44
<DropdownMenuItem
28
45
onClick={() => {
29
46
setTheme("light");