ershisan99/DevToysWeb
1
0
Fork 0
mirror of https://github.com/ershisan99/DevToysWeb.git synced 2025-12-16 20:49:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: memoize icons on export

Browse Source
This commit is contained in:
rusconn
2023-06-24 09:26:37 +09:00
parent 257080b00d
commit 240fba0e74
14 changed files with 74 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/theme-toggle.tsx
View File

@@ -1,6 +1,5 @@
"use client";
import { useMemo } from "react";
import { useTheme } from "next-themes";
import { Button } from "@/components/ui/button";
@@ -9,27 +8,14 @@ import { icons } from "@/components/icons";
export function ThemeToggle() {
const { resolvedTheme, setTheme } = useTheme();
const sunIcon = useMemo(
() => (
<icons.Sun className="h-7 w-7 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
),
[]
);
const moonIcon = useMemo(
() => (
<icons.Moon className="absolute h-7 w-7 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
),
[]
);
return (
<Button
className="h-10 w-10 p-0"
variant="ghost"
onClick={() => setTheme(resolvedTheme === "light" ? "dark" : "light")}
>
{sunIcon}
{moonIcon}
<icons.Sun className="h-7 w-7 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<icons.Moon className="absolute h-7 w-7 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span>
</Button>
);