first commit

2026-06-16 19:17:37 +03:00
parent 2d149f1178
commit 6fa7cc6630
25 changed files with 1378 additions and 167 deletions
@@ -0,0 +1,54 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "@/components/theme-provider"
+import { motion } from "framer-motion"
+
+export function ThemeToggle() {
+  const { theme, setTheme, resolvedTheme } = useTheme()
+  const [mounted, setMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return <div className="w-9 h-9" />
+  }
+
+  const isDark = resolvedTheme === "dark"
+
+  return (
+    <button
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      className="relative p-2 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary overflow-hidden"
+      aria-label="Toggle theme"
+    >
+      <motion.div
+        initial={false}
+        animate={{
+          scale: isDark ? 0 : 1,
+          opacity: isDark ? 0 : 1,
+          rotate: isDark ? -90 : 0
+        }}
+        transition={{ duration: 0.3, ease: "easeInOut" }}
+        className="absolute inset-0 flex items-center justify-center"
+      >
+        <Sun className="h-4 w-4" />
+      </motion.div>
+      <motion.div
+        initial={false}
+        animate={{
+          scale: isDark ? 1 : 0,
+          opacity: isDark ? 1 : 0,
+          rotate: isDark ? 0 : 90
+        }}
+        transition={{ duration: 0.3, ease: "easeInOut" }}
+        className="relative flex items-center justify-center"
+      >
+        <Moon className="h-4 w-4" />
+      </motion.div>
+    </button>
+  )
+}