|
1 | | -import { useRouteContext } from "@tanstack/react-router"; |
2 | | -import { Button } from "@/components/ui/button"; |
3 | | -import { setTheme } from "@/core/utils"; |
| 1 | +import { startTransition } from "react"; |
| 2 | +import { AiLaptopIcon, ArrowDown01Icon, Moon01Icon, Sun03Icon } from "@hugeicons/core-free-icons"; |
| 3 | +import { HugeiconsIcon } from "@hugeicons/react"; |
| 4 | +import { ThemeSchema, type Theme, cn } from "@/core/utils"; |
| 5 | +import { Badge } from "@/components/ui/badge"; |
| 6 | +import { |
| 7 | + DropdownMenu, |
| 8 | + DropdownMenuContent, |
| 9 | + DropdownMenuGroup, |
| 10 | + DropdownMenuLabel, |
| 11 | + DropdownMenuRadioGroup, |
| 12 | + DropdownMenuRadioItem, |
| 13 | + DropdownMenuSeparator, |
| 14 | + DropdownMenuTrigger, |
| 15 | +} from "@/components/ui/dropdown-menu"; |
| 16 | +import { useSetThemeState, useThemeState } from "@/store"; |
4 | 17 |
|
5 | | -export function Header() { |
6 | | - const router = useRouter(); |
7 | | - const { theme } = useRouteContext({ from: "__root__" }); |
| 18 | +const themeOptions = [ |
| 19 | + { |
| 20 | + label: "跟随系统", |
| 21 | + value: "system", |
| 22 | + description: "自动匹配设备外观", |
| 23 | + icon: AiLaptopIcon, |
| 24 | + }, |
| 25 | + { |
| 26 | + label: "浅色", |
| 27 | + value: "light", |
| 28 | + description: "适合白天和演示场景", |
| 29 | + icon: Sun03Icon, |
| 30 | + }, |
| 31 | + { |
| 32 | + label: "深色", |
| 33 | + value: "dark", |
| 34 | + description: "适合长时间编码阅读", |
| 35 | + icon: Moon01Icon, |
| 36 | + }, |
| 37 | +] as const satisfies ReadonlyArray<{ |
| 38 | + label: string; |
| 39 | + value: Theme; |
| 40 | + description: string; |
| 41 | + icon: typeof Sun03Icon; |
| 42 | +}>; |
8 | 43 |
|
9 | | - const toggleTheme = useCallback(() => { |
10 | | - setTheme(theme === "dark" ? "light" : "dark"); |
11 | | - router.invalidate(); |
12 | | - }, [theme, router]); |
| 44 | +export function Header() { |
| 45 | + const theme = useThemeState(); |
| 46 | + const setTheme = useSetThemeState(); |
| 47 | + const currentTheme = themeOptions.find((item) => item.value === theme) ?? themeOptions[0]; |
13 | 48 |
|
14 | 49 | return ( |
15 | | - <header className="border-b"> |
16 | | - <div className="container mx-auto flex h-16 items-center justify-between px-4"> |
17 | | - <span className="font-bold text-xl">React Template</span> |
18 | | - <Button variant="outline" size="sm" onClick={toggleTheme}> |
19 | | - {theme === "dark" ? "Light" : "Dark"} |
20 | | - </Button> |
| 50 | + <header className="sticky top-0 z-40 border-b border-border/70 bg-background/80 backdrop-blur-xl"> |
| 51 | + <div className="mx-auto flex h-20 max-w-6xl items-center justify-between px-4 sm:px-6"> |
| 52 | + <div className="flex items-center gap-4"> |
| 53 | + <div className="flex size-11 items-center justify-center rounded-2xl border border-border/70 bg-card shadow-lg shadow-black/5 dark:shadow-black/20"> |
| 54 | + <span className="font-semibold tracking-[0.18em] text-sm">RT</span> |
| 55 | + </div> |
| 56 | + |
| 57 | + <div className="space-y-1"> |
| 58 | + <div className="flex items-center gap-2"> |
| 59 | + <span className="text-base font-semibold sm:text-lg">React Template</span> |
| 60 | + <Badge variant="outline" className="hidden rounded-full px-2.5 sm:inline-flex"> |
| 61 | + Starter |
| 62 | + </Badge> |
| 63 | + </div> |
| 64 | + <p className="hidden text-sm text-muted-foreground sm:block"> |
| 65 | + TanStack Start · shadcn/ui · Zustand |
| 66 | + </p> |
| 67 | + </div> |
| 68 | + </div> |
| 69 | + |
| 70 | + <div className="flex items-center gap-2"> |
| 71 | + <DropdownMenu> |
| 72 | + <DropdownMenuTrigger |
| 73 | + className={cn( |
| 74 | + "ring-foreground/10 bg-background hover:bg-muted inline-flex h-10 items-center gap-2 rounded-full border px-3 text-sm font-medium shadow-sm outline-none transition-colors", |
| 75 | + )} |
| 76 | + > |
| 77 | + <HugeiconsIcon icon={currentTheme.icon} strokeWidth={2} className="size-4" /> |
| 78 | + <span className="hidden sm:inline">{currentTheme.label}</span> |
| 79 | + <HugeiconsIcon |
| 80 | + icon={ArrowDown01Icon} |
| 81 | + strokeWidth={2} |
| 82 | + className="size-4 text-muted-foreground" |
| 83 | + /> |
| 84 | + </DropdownMenuTrigger> |
| 85 | + |
| 86 | + <DropdownMenuContent align="end" className="w-56"> |
| 87 | + <DropdownMenuGroup> |
| 88 | + <DropdownMenuLabel>主题切换</DropdownMenuLabel> |
| 89 | + </DropdownMenuGroup> |
| 90 | + <DropdownMenuSeparator /> |
| 91 | + <DropdownMenuRadioGroup |
| 92 | + value={theme} |
| 93 | + onValueChange={(value) => { |
| 94 | + startTransition(() => { |
| 95 | + setTheme(ThemeSchema.parse(value)); |
| 96 | + }); |
| 97 | + }} |
| 98 | + > |
| 99 | + {themeOptions.map((item) => ( |
| 100 | + <DropdownMenuRadioItem |
| 101 | + key={item.value} |
| 102 | + value={item.value} |
| 103 | + className="flex items-start gap-3 py-2" |
| 104 | + > |
| 105 | + <HugeiconsIcon |
| 106 | + icon={item.icon} |
| 107 | + strokeWidth={2} |
| 108 | + className="mt-0.5 size-4 text-muted-foreground" |
| 109 | + /> |
| 110 | + <span className="space-y-0.5"> |
| 111 | + <span className="block font-medium text-foreground">{item.label}</span> |
| 112 | + <span className="block text-xs text-muted-foreground"> |
| 113 | + {item.description} |
| 114 | + </span> |
| 115 | + </span> |
| 116 | + </DropdownMenuRadioItem> |
| 117 | + ))} |
| 118 | + </DropdownMenuRadioGroup> |
| 119 | + </DropdownMenuContent> |
| 120 | + </DropdownMenu> |
| 121 | + </div> |
21 | 122 | </div> |
22 | 123 | </header> |
23 | 124 | ); |
|
0 commit comments