ThemeToggle.tsx•1.16 kB
"use client"
import * as React from "react"
import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"
import { motion, AnimatePresence } from "framer-motion"
export function ThemeToggle() {
const { setTheme, theme } = useTheme()
const toggleTheme = () => {
setTheme(theme === 'dark' ? 'light' : 'dark')
}
return (
<Button variant="outline" size="icon" onClick={toggleTheme} className="relative overflow-hidden">
<AnimatePresence initial={false} mode="wait">
<motion.div
key={theme === 'dark' ? 'sun' : 'moon'}
initial={{ y: 20, opacity: 0, rotate: -90 }}
animate={{ y: 0, opacity: 1, rotate: 0 }}
exit={{ y: -20, opacity: 0, rotate: 90 }}
transition={{ duration: 0.3 }}
className="absolute"
>
{theme === 'dark' ? (
<Sun className="h-[1.2rem] w-[1.2rem]" />
) : (
<Moon className="h-[1.2rem] w-[1.2rem]" />
)}
</motion.div>
</AnimatePresence>
<span className="sr-only">Toggle theme</span>
</Button>
)
}