diff options
| author | zwlucas <lucas.fariamo08@gmail.com> | 2026-06-05 20:52:54 +0000 |
|---|---|---|
| committer | zwlucas <lucas.fariamo08@gmail.com> | 2026-06-05 20:52:54 +0000 |
| commit | 09f964451d7d92e9891430ec4595c1276d486aab (patch) | |
| tree | 28da4483f5c28924a8c47fceb648b1baebe88224 /src/components/UI/Toggle.tsx | |
| download | yace-09f964451d7d92e9891430ec4595c1276d486aab.tar.gz yace-09f964451d7d92e9891430ec4595c1276d486aab.zip | |
Signed-off-by: zwlucas <lucas.fariamo08@gmail.com>
Diffstat (limited to 'src/components/UI/Toggle.tsx')
| -rw-r--r-- | src/components/UI/Toggle.tsx | 25 |
1 files changed, 25 insertions, 0 deletions
diff --git a/src/components/UI/Toggle.tsx b/src/components/UI/Toggle.tsx new file mode 100644 index 0000000..17b98e2 --- /dev/null +++ b/src/components/UI/Toggle.tsx @@ -0,0 +1,25 @@ +interface ToggleProps { + checked: boolean + onChange: (checked: boolean) => void + disabled?: boolean +} + +export default function Toggle({ checked, onChange, disabled }: ToggleProps) { + return ( + <button + role="switch" + aria-checked={checked} + disabled={disabled} + className="relative inline-flex h-5 w-9 shrink-0 rounded-full transition-colors duration-200 disabled:opacity-30 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-transparent" + style={{ + backgroundColor: checked ? 'var(--color-accent)' : 'var(--color-panel-border)', + }} + onClick={() => { if (!disabled) onChange(!checked) }} + > + <span + className="inline-block h-[16px] w-[16px] rounded-full bg-white shadow-sm transition-transform duration-200" + style={{ transform: checked ? 'translateX(18px)' : 'translateX(3px)', marginTop: '2px' }} + /> + </button> + ) +} |