gavin/Tarokka
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

update colors

Browse Source
This commit is contained in:
Gavin McDonald
2025-04-24 17:54:47 -04:00
parent 969d9f5028
commit 6e2247d6f3
7 changed files with 45 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/Switch.tsx
View File

@@ -6,20 +6,20 @@ export interface SwitchProps {
export default function Switch({ label, value, toggleAction }: SwitchProps) {
return (
<label className="flex items-center justify-between w-full gap-2 cursor-pointer">
<label className="flex items-center justify-between w-full gap-2 cursor-pointer text-yellow-400 hover:text-yellow-300">
<span className="text-sm capitalize">{label}</span>
<div className="relative inline-block w-8 h-4 align-middle select-none transition duration-200 ease-in">
<input type="checkbox" checked={value} onChange={toggleAction} className="sr-only" />
<div
className={`block w-8 h-4 rounded-full transition ${
value ? 'bg-gray-500' : 'bg-gray-600'
value ? 'bg-slate-500' : 'bg-slate-600'
}`}
/>
<div
className={`absolute top-[2px] left-[2px] w-3 h-3 rounded-full transition-transform duration-200 ease-out transform
${value ? 'translate-x-4 scale-110 shadow-[0_0_2px_2px_rgba(255,255,255,0.4)]' : 'scale-95'}
${value ? 'bg-gray-100' : 'bg-gray-400'}`}
className={`absolute top-[2px] left-[2px] w-3 h-3 rounded-full transition-all duration-250 ease-out transform
${value ? 'translate-x-4 scale-110' : 'scale-95'}
${value ? 'bg-yellow-400' : 'bg-yellow-500'}`}
/>
</div>
</label>