1import { Moon, Sun } from "lucide-react";
 2import {
 3    DropdownMenuSub,
 4    DropdownMenuSubContent,
 5    DropdownMenuSubTrigger,
 6    DropdownMenuItem,
 7    DropdownMenuPortal,
 8} from "@marzneshin/components";
 9import { useTheme, Theme } from "../theme-provider";
10import { useTranslation } from "react-i18next";
11import { cn } from "@marzneshin/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="flex items-center ml-auto">
32                    <Sun className="w-4 h-4 m-0 transition-all transform scale-100 rotate-0 dark:scale-0 dark:-rotate-90" />
33                    <Moon className="w-4 h-4 m-0 transition-all transform scale-0 rotate-90 dark:scale-100 dark:rotate-0" />
34                </div>
35                <span>{t('theme')}</span>
36            </DropdownMenuSubTrigger>
37            <DropdownMenuPortal>
38                <DropdownMenuSubContent className="space-y-1">
39                    <ThemeItem schema="light" />
40                    <ThemeItem schema="dark" />
41                    <ThemeItem schema="system" />
42                </DropdownMenuSubContent>
43            </DropdownMenuPortal>
44        </DropdownMenuSub>
45    );
46
47}