progress on client site

site/src/components/mode-toggle.tsx

@@ -0,0 +1,31 @@
+import { Moon, Sun } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { useTheme } from '@/components/theme-provider'
+
+export function ModeToggle() {
+	const { setTheme } = useTheme()
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button variant="outline" size="icon">
+					<Sun className="h-[1.2rem] w-[1.2rem] dark:opacity-0" />
+					<Moon className="absolute h-[1.2rem] w-[1.2rem] opacity-0 dark:opacity-100" />
+					<span className="sr-only">Toggle theme</span>
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent align="end">
+				<DropdownMenuItem onClick={() => setTheme('light')}>Light</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme('dark')}>Dark</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme('system')}>System</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	)
+}