64ed90d993
- Deleted redundant components (`AddActionButton`, `AlertBox`, `AlertStack`, `BackButton`, `CancelButton`, and `CollapsableArea`) and related files. - Removed unused models (`Book`, `BookSerie`, `BookTables`, `Character`, and `Chapter`) to reduce codebase clutter. - Updated project structure and references to reflect these removals.
35 lines
1.3 KiB
TypeScript
35 lines
1.3 KiB
TypeScript
'use client'
|
|
import React from "react";
|
|
|
|
interface ToggleSwitchProps {
|
|
checked: boolean;
|
|
onChange: (checked: boolean) => void;
|
|
disabled?: boolean;
|
|
size?: 'sm' | 'md';
|
|
}
|
|
|
|
export default function ToggleSwitch({checked, onChange, disabled = false, size = 'md'}: ToggleSwitchProps) {
|
|
const trackClass: string = size === 'sm' ? 'h-4 w-7' : 'h-6 w-11';
|
|
const thumbClass: string = size === 'sm' ? 'h-2.5 w-2.5' : 'h-4 w-4';
|
|
const translateClass: string = size === 'sm'
|
|
? (checked ? 'translate-x-3.5' : 'translate-x-0.5')
|
|
: (checked ? 'translate-x-6' : 'translate-x-1');
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
role="switch"
|
|
aria-checked={checked}
|
|
disabled={disabled}
|
|
onClick={(): void => onChange(!checked)}
|
|
className={`relative inline-flex ${trackClass} items-center rounded-full transition-colors duration-200 ${
|
|
checked ? 'bg-primary' : 'bg-secondary'
|
|
} ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
|
|
>
|
|
<span
|
|
className={`inline-block ${thumbClass} transform rounded-full bg-text-primary transition-transform duration-200 ${translateClass}`}
|
|
/>
|
|
</button>
|
|
);
|
|
}
|