Initial commit

src/shared/components/ThemeToggle.js

@@ -0,0 +1,47 @@
+"use client";
+
+import { useTheme } from "@/shared/hooks/useTheme";
+import { cn } from "@/shared/utils/cn";
+
+export default function ThemeToggle({ className, variant = "default" }) {
+  const { theme, toggleTheme, isDark } = useTheme();
+
+  const variants = {
+    default: cn(
+      "flex items-center justify-center size-10 rounded-full",
+      "text-text-muted",
+      "hover:bg-black/5",
+      "hover:text-text-main",
+      "transition-colors"
+    ),
+    card: cn(
+      "flex items-center justify-center size-11 rounded-full",
+      "bg-surface/60",
+      "hover:bg-surface",
+      "border border-border",
+      "backdrop-blur-md shadow-sm hover:shadow-md",
+      "text-text-muted-light hover:text-primary",
+      "hover:text-primary",
+      "transition-all group"
+    ),
+  };
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className={cn(variants[variant], className)}
+      aria-label={`Switch to ${isDark ? "light" : "dark"} mode`}
+      title={`Switch to ${isDark ? "light" : "dark"} mode`}
+    >
+      <span
+        className={cn(
+          "material-symbols-outlined text-[22px]",
+          variant === "card" && "transition-transform duration-300 group-hover:rotate-12"
+        )}
+      >
+        {isDark ? "light_mode" : "dark_mode"}
+      </span>
+    </button>
+  );
+}
+