root/nezha_dash
1
0
Fork 0
mirror of https://github.com/hamster1963/nezha-dash.git synced 2025-04-24 21:10:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: DropdownMenuItem rounded

Browse Source
This commit is contained in:
hamster1963 2024-12-26 14:09:21 +08:00
parent 4c7ffb509c
commit 8575aee27e
3 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/LanguageSwitcher.tsx
View File

@ -9,6 +9,7 @@ import {
} from "@/components/ui/dropdown-menu" } from "@/components/ui/dropdown-menu"
import { localeItems } from "@/i18n-metadata" import { localeItems } from "@/i18n-metadata"
import { setUserLocale } from "@/i18n/locale" import { setUserLocale } from "@/i18n/locale"
import { cn } from "@/lib/utils"
import { CheckCircleIcon } from "@heroicons/react/20/solid" import { CheckCircleIcon } from "@heroicons/react/20/solid"
import { useLocale } from "next-intl" import { useLocale } from "next-intl"
import * as React from "react" import * as React from "react"
@ -34,11 +35,20 @@ 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 <DropdownMenuItem
key={item.code} key={item.code}
onSelect={(e) => handleSelect(e, item.code)} onSelect={(e) => handleSelect(e, item.code)}
className={locale === item.code ? "bg-muted gap-3" : ""} className={cn(
{
"bg-muted gap-3": 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>

6
components/ThemeSwitcher.tsx
View File

@ -37,19 +37,19 @@ export function ModeToggle() {
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="flex flex-col gap-0.5" align="end"> <DropdownMenuContent className="flex flex-col gap-0.5" align="end">
<DropdownMenuItem <DropdownMenuItem
className={cn({ "gap-3 bg-muted": theme === "light" })} className={cn("rounded-b-[5px]", { "gap-3 bg-muted": theme === "light" })}
onSelect={(e) => handleSelect(e, "light")} onSelect={(e) => handleSelect(e, "light")}
> >
{t("Light")} {theme === "light" && <CheckCircleIcon className="size-4" />} {t("Light")} {theme === "light" && <CheckCircleIcon className="size-4" />}
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
className={cn({ "gap-3 bg-muted": theme === "dark" })} className={cn("rounded-[5px]", { "gap-3 bg-muted": theme === "dark" })}
onSelect={(e) => handleSelect(e, "dark")} onSelect={(e) => handleSelect(e, "dark")}
> >
{t("Dark")} {theme === "dark" && <CheckCircleIcon className="size-4" />} {t("Dark")} {theme === "dark" && <CheckCircleIcon className="size-4" />}
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
className={cn({ "gap-3 bg-muted": theme === "system" })} className={cn("rounded-t-[5px]", { "gap-3 bg-muted": theme === "system" })}
onSelect={(e) => handleSelect(e, "system")} onSelect={(e) => handleSelect(e, "system")}
> >
{t("System")} {theme === "system" && <CheckCircleIcon className="size-4" />} {t("System")} {theme === "system" && <CheckCircleIcon className="size-4" />}

2
components/ui/dropdown-menu.tsx
View File

@ -62,7 +62,7 @@ const DropdownMenuContent = React.forwardRef<
ref={ref} ref={ref}
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( className={cn(
"z-50 overflow-hidden rounded-md border bg-popover p-1.5 text-popover-foreground shadow-2xl dark:shadow-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", "z-50 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-2xl dark:shadow-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className, className,
)} )}
{...props} {...props}