style: DropdownMenuItem rounded

hamster1963 · Dec 26, 2024 · 8575aee · 8575aee
1 parent 4c7ffb5
commit 8575aee
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/components/LanguageSwitcher.tsx b/components/LanguageSwitcher.tsx
@@ -9,6 +9,7 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { localeItems } from "@/i18n-metadata"
 import { setUserLocale } from "@/i18n/locale"
+import { cn } from "@/lib/utils"
 import { CheckCircleIcon } from "@heroicons/react/20/solid"
 import { useLocale } from "next-intl"
 import * as React from "react"
@@ -34,11 +35,20 @@ export function LanguageSwitcher() {
         </Button>
       </DropdownMenuTrigger>
       <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" : ""}
+            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" />}
           </DropdownMenuItem>

diff --git a/components/ThemeSwitcher.tsx b/components/ThemeSwitcher.tsx
@@ -37,19 +37,19 @@ export function ModeToggle() {
       </DropdownMenuTrigger>
       <DropdownMenuContent className="flex flex-col gap-0.5" align="end">
         <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")}
         >
           {t("Light")} {theme === "light" && <CheckCircleIcon className="size-4" />}
         </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")}
         >
           {t("Dark")} {theme === "dark" && <CheckCircleIcon className="size-4" />}
         </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")}
         >
           {t("System")} {theme === "system" && <CheckCircleIcon className="size-4" />}

diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
@@ -62,7 +62,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       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,
       )}
       {...props}