diff --git a/components/LanguageSwitcher.tsx b/components/LanguageSwitcher.tsx index ed81e85..a31c3e1 100644 --- 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() { - {localeItems.map((item) => ( + {localeItems.map((item, index) => ( 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 && } diff --git a/components/ThemeSwitcher.tsx b/components/ThemeSwitcher.tsx index 31d554b..286fab8 100644 --- a/components/ThemeSwitcher.tsx +++ b/components/ThemeSwitcher.tsx @@ -37,19 +37,19 @@ export function ModeToggle() { handleSelect(e, "light")} > {t("Light")} {theme === "light" && } handleSelect(e, "dark")} > {t("Dark")} {theme === "dark" && } handleSelect(e, "system")} > {t("System")} {theme === "system" && } diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx index 89d5c01..359a68c 100644 --- 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}