hamid zarghami
46 lines
1.9 KiB
TypeScript
46 lines
1.9 KiB
TypeScript
import { Moon, Sun1 } from 'iconsax-react'
|
|
import { useTheme } from '@/contexts/ThemeContext'
|
|
import Button from '@/components/Button'
|
|
import { getIconColor } from '@/utils/colorUtils'
|
|
|
|
const ThemeToggle = () => {
|
|
const { theme, toggleTheme } = useTheme()
|
|
|
|
const isDark = theme === 'dark'
|
|
const label = isDark ? 'تغییر به حالت روشن' : 'تغییر به حالت تاریک'
|
|
|
|
return (
|
|
<Button
|
|
onClick={toggleTheme}
|
|
variant="secondary"
|
|
title={label}
|
|
className={`group relative w-12 h-6 p-0 rounded-full transition-all duration-300
|
|
bg-secondary/90 dark:bg-secondary ring-1 ring-inset ring-border/60
|
|
hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`}
|
|
>
|
|
{/* Thumb */}
|
|
<span
|
|
className={`pointer-events-none absolute top-0.5 left-0.5 w-5 h-5 rounded-full border border-border z-0
|
|
bg-card shadow-[0_2px_6px_rgba(0,0,0,0.08)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.35)]
|
|
transition-transform duration-300 ease-out will-change-transform ${isDark ? 'translate-x-6' : 'translate-x-0'}`}
|
|
/>
|
|
|
|
{/* Icons */}
|
|
<span className="pointer-events-none absolute inset-0 z-10 grid grid-cols-2 place-items-center">
|
|
<Sun1
|
|
size={14}
|
|
color={isDark ? getIconColor('muted') : getIconColor('primary')}
|
|
className={`transition-opacity duration-300 ${isDark ? 'opacity-60' : 'opacity-100'}`}
|
|
/>
|
|
<Moon
|
|
size={14}
|
|
color={isDark ? getIconColor('primary') : getIconColor('muted')}
|
|
className={`transition-opacity duration-300 ${isDark ? 'opacity-100' : 'opacity-60'}`}
|
|
/>
|
|
</span>
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
export default ThemeToggle
|