Buriburizaemon/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/Buriburizaem0n/nezha-dash-v1.git synced 2026-05-06 13:58:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: enhance styling of LanguageSwitcher and ThemeSwitcher components

Browse Source
This commit is contained in:
hamster1963
2025-12-28 14:40:44 +08:00
parent 409ec0b62c
commit 4f9db466a3
2 changed files with 27 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/LanguageSwitcher.tsx
+15 -2
View File
@@ -43,8 +43,21 @@ export function LanguageSwitcher() {
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="flex flex-col gap-0.5" align="end"> <DropdownMenuContent className="flex flex-col gap-0.5" align="end">
{localeItems.map((item) => ( {localeItems.map((item, index) => (
<DropdownMenuItem key={item.code} onSelect={(e) => handleSelect(e, item.code)} className={locale === item.code ? "bg-muted gap-3" : ""}> <DropdownMenuItem
key={item.code}
onSelect={(e) => handleSelect(e, item.code)}
className={cn(
{
"gap-3 bg-muted font-semibold": locale === item.code,
},
{
"rounded-t-[5px]": index === localeItems.length - 1,
"rounded-[5px]": index !== 0 && index !== localeItems.length - 1,
"rounded-b-[5px]": index === 0,
},
)}
>
{item.name} {locale === item.code && <CheckCircleIcon className="size-4" />} {item.name} {locale === item.code && <CheckCircleIcon className="size-4" />}
</DropdownMenuItem> </DropdownMenuItem>
))} ))}
src/components/ThemeSwitcher.tsx
+12 -3
View File
@@ -35,15 +35,24 @@ export function ModeToggle() {
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="flex flex-col gap-0.5" align="end"> <DropdownMenuContent className="flex flex-col gap-0.5" align="end">
<DropdownMenuItem className={cn({ "gap-3 bg-muted": theme === "light" })} onSelect={(e) => handleSelect(e, "light")}> <DropdownMenuItem
className={cn("rounded-b-[5px]", { "gap-3 bg-muted font-semibold": theme === "light" })}
onSelect={(e) => handleSelect(e, "light")}
>
{t("theme.light")} {t("theme.light")}
{theme === "light" && <CheckCircleIcon className="size-4" />} {theme === "light" && <CheckCircleIcon className="size-4" />}
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem className={cn({ "gap-3 bg-muted": theme === "dark" })} onSelect={(e) => handleSelect(e, "dark")}> <DropdownMenuItem
className={cn("rounded-[5px]", { "gap-3 bg-muted font-semibold": theme === "dark" })}
onSelect={(e) => handleSelect(e, "dark")}
>
{t("theme.dark")} {t("theme.dark")}
{theme === "dark" && <CheckCircleIcon className="size-4" />} {theme === "dark" && <CheckCircleIcon className="size-4" />}
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem className={cn({ "gap-3 bg-muted": theme === "system" })} onSelect={(e) => handleSelect(e, "system")}> <DropdownMenuItem
className={cn("rounded-t-[5px]", { "gap-3 bg-muted font-semibold": theme === "system" })}
onSelect={(e) => handleSelect(e, "system")}
>
{t("theme.system")} {t("theme.system")}
{theme === "system" && <CheckCircleIcon className="size-4" />} {theme === "system" && <CheckCircleIcon className="size-4" />}
</DropdownMenuItem> </DropdownMenuItem>