gitscope
/
← marzneshin / dashboard/src/features/theme-switch/theme-toggle/index.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/theme-switch/theme-toggle/index.tsx · v0.6.3
Source
1 1c0d1b7 Dawsh 2y ago import { Moon, Sun } from "lucide-react";
2 88bd1b0 Mrdn 2y ago import {
3 3c1143b Mardin 2y ago DropdownMenuSub,
4 3c1143b Mardin 2y ago DropdownMenuSubContent,
5 3c1143b Mardin 2y ago DropdownMenuSubTrigger,
6 88bd1b0 Mrdn 2y ago DropdownMenuItem,
7 3c1143b Mardin 2y ago DropdownMenuPortal,
8 7389ad0 Mardin 2y ago } from "@marzneshin/common/components";
9 3c1143b Mardin 2y ago import { useTheme, Theme } from "../theme-provider";
10 1c0d1b7 Dawsh 2y ago import { useTranslation } from "react-i18next";
11 d636f3f Dawsh 2y ago import { cn } from "@marzneshin/common/utils";
12 3c1143b Mardin 2y ago
13 3c1143b Mardin 2y ago const ThemeItem = ({ schema }: { schema: Theme }) => {
14 3c1143b Mardin 2y ago const { theme, setTheme } = useTheme();
15 3c1143b Mardin 2y ago const { t } = useTranslation();
16 3c1143b Mardin 2y ago return (
17 3c1143b Mardin 2y ago <DropdownMenuItem
18 3c1143b Mardin 2y ago className={cn({ "bg-primary text-secondary": theme === schema })}
19 3c1143b Mardin 2y ago onMouseDown={() => setTheme(schema)}>
20 3c1143b Mardin 2y ago {t(schema)}
21 3c1143b Mardin 2y ago </DropdownMenuItem>
22 3c1143b Mardin 2y ago );
23 3c1143b Mardin 2y ago }
24 88bd1b0 Mrdn 2y ago
25 88bd1b0 Mrdn 2y ago export function ThemeToggle() {
26 1c0d1b7 Dawsh 2y ago const { t } = useTranslation();
27 3c1143b Mardin 2y ago
28 88bd1b0 Mrdn 2y ago return (
29 3c1143b Mardin 2y ago <DropdownMenuSub>
30 3c1143b Mardin 2y ago <DropdownMenuSubTrigger arrowDir="left" className="w-full flex">
31 86fae4b Mardin 1y ago <div className="hstack gap-2 items-center justify-end w-full">
32 86fae4b Mardin 1y ago <span>{t('theme')}</span>
33 86fae4b Mardin 1y ago <div className="flex items-center">
34 86fae4b Mardin 1y ago <Sun className="w-4 h-4 m-0 transition-all transform scale-100 rotate-0 dark:scale-0 dark:-rotate-90" />
35 86fae4b Mardin 1y ago <Moon className="w-4 h-4 m-0 transition-all transform scale-0 rotate-90 dark:scale-100 dark:rotate-0" />
36 86fae4b Mardin 1y ago </div>
37 3c1143b Mardin 2y ago </div>
38 3c1143b Mardin 2y ago </DropdownMenuSubTrigger>
39 3c1143b Mardin 2y ago <DropdownMenuPortal>
40 3c1143b Mardin 2y ago <DropdownMenuSubContent className="space-y-1">
41 86fae4b Mardin 1y ago <ThemeItem schema="system" />
42 3c1143b Mardin 2y ago <ThemeItem schema="light" />
43 3c1143b Mardin 2y ago <ThemeItem schema="dark" />
44 3c1143b Mardin 2y ago </DropdownMenuSubContent>
45 3c1143b Mardin 2y ago </DropdownMenuPortal>
46 3c1143b Mardin 2y ago </DropdownMenuSub>
47 1c0d1b7 Dawsh 2y ago );
48 3c1143b Mardin 2y ago
49 88bd1b0 Mrdn 2y ago }