codebase overhaul (#697)

1 files changed, 26 insertions, 15 deletions

diff --git a/apps/web/src/components/theme-toggle.tsx b/apps/web/src/components/theme-toggle.tsx
index 8302a19c..394d75b2 100644
--- a/apps/web/src/components/theme-toggle.tsx
+++ b/apps/web/src/components/theme-toggle.tsx
@@ -1,25 +1,36 @@
 "use client";

 

 import { Button } from "./ui/button";

-import { Sun, Moon } from "lucide-react";

 import { useTheme } from "next-themes";

+import { cn } from "@/utils/ui";

+import { Sun03Icon } from "@hugeicons/core-free-icons";

+import { HugeiconsIcon } from "@hugeicons/react";

 

 interface ThemeToggleProps {

-  className?: string;

+	className?: string;

+	iconClassName?: string;

+	onToggle?: (e: React.MouseEvent<HTMLButtonElement>) => void;

 }

 

-export function ThemeToggle({ className }: ThemeToggleProps) {

-  const { theme, setTheme } = useTheme();

+export function ThemeToggle({

+	className,

+	iconClassName,

+	onToggle,

+}: ThemeToggleProps) {

+	const { theme, setTheme } = useTheme();

 

-  return (

-    <Button

-      size="icon"

-      variant="text"

-      className="h-7"

-      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}

-    >

-      <Sun className="!size-[1.1rem]" />

-      <span className="sr-only">{theme === "dark" ? "Light" : "Dark"}</span>

-    </Button>

-  );

+	return (

+		<Button

+			size="icon"

+			variant="text"

+			className={cn("h-7", className)}

+			onClick={(e) => {

+				setTheme(theme === "dark" ? "light" : "dark");

+				onToggle?.(e);

+			}}

+		>

+			<HugeiconsIcon icon={Sun03Icon} className={cn("!size-[1.1rem]", iconClassName)} />

+			<span className="sr-only">{theme === "dark" ? "Light" : "Dark"}</span>

+		</Button>

+	);

 }