Listen to and share the music in the Atmosphere. musicsky.up.railway.app/
nextjs atproto music typescript react
3
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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
··· 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");