41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import { useTheme } from 'next-themes'
|
|
|
|
import { motion as m } from 'framer-motion'
|
|
import { twMerge } from 'tailwind-merge'
|
|
|
|
const themeMenus = [{ name: 'light' }, { name: 'dark' }, { name: 'system' }]
|
|
|
|
export default function ToggleTheme() {
|
|
const { theme: currentTheme, setTheme } = useTheme()
|
|
|
|
return (
|
|
<div className="flex items-center space-x-1">
|
|
{themeMenus.map((theme, i) => {
|
|
const isActive = currentTheme === theme.name
|
|
return (
|
|
<div className="relative" key={i}>
|
|
<button
|
|
className={twMerge(
|
|
'px-2 py-1 font-semibold capitalize',
|
|
!isActive && 'opacity-50'
|
|
)}
|
|
onClick={async () => {
|
|
setTheme(theme.name)
|
|
// handeleNativeTheme(theme.name)
|
|
}}
|
|
>
|
|
{theme.name}
|
|
</button>
|
|
{isActive ? (
|
|
<m.div
|
|
className="absolute inset-0 h-full w-full rounded-md border border-primary/50 bg-blue-500/20"
|
|
layoutId="active-theme-menu"
|
|
/>
|
|
) : null}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|