55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
"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>
|
|
)
|
|
}
|