1import { Moon, Sun } from "lucide-react";
 2import {
 3    DropdownMenuSub,
 4    DropdownMenuSubContent,
 5    DropdownMenuSubTrigger,
 6    DropdownMenuItem,
 7    DropdownMenuPortal,
 8} from "@marzneshin/common/components";
 9import { useTheme, Theme } from "../theme-provider";
10import { useTranslation } from "react-i18next";
11import { cn } from "@marzneshin/common/utils";
12
13const ThemeItem = ({ schema }: { schema: Theme }) => {
14    const { theme, setTheme } = useTheme();
15    const { t } = useTranslation();
16    return (
17        <DropdownMenuItem
18            className={cn({ "bg-primary text-secondary": theme === schema })}
19            onMouseDown={() => setTheme(schema)}>
20            {t(schema)}
21        </DropdownMenuItem>
22    );
23}
24
25export function ThemeToggle() {
26    const { t } = useTranslation();
27
28    return (
29        <DropdownMenuSub>
30            <DropdownMenuSubTrigger arrowDir="left" className="w-full flex">
31                <div className="hstack gap-2  items-center justify-end w-full">
32                    <span>{t('theme')}</span>
33                    <div className="flex items-center">
34                        <Sun className="w-4 h-4 m-0 transition-all transform scale-100 rotate-0 dark:scale-0 dark:-rotate-90" />
35                        <Moon className="w-4 h-4 m-0 transition-all transform scale-0 rotate-90 dark:scale-100 dark:rotate-0" />
36                    </div>
37                </div>
38            </DropdownMenuSubTrigger>
39            <DropdownMenuPortal>
40                <DropdownMenuSubContent className="space-y-1">
41                    <ThemeItem schema="system" />
42                    <ThemeItem schema="light" />
43                    <ThemeItem schema="dark" />
44                </DropdownMenuSubContent>
45            </DropdownMenuPortal>
46        </DropdownMenuSub>
47    );
48
49}