dstpabuaran.com/resources/js/components/data-display/toggle-status.tsx

44 lines
1.0 KiB
TypeScript

import { router } from '@inertiajs/react';
import { Switch } from '@/components/ui/switch';
type ToggleStatusProps = {
url: string;
checked: boolean;
onToggle?: () => void;
label?: string;
disabled?: boolean;
wrapperClassName?: string;
};
export function ToggleStatus({
url,
checked,
onToggle,
label,
disabled = false,
wrapperClassName = 'flex items-center gap-2',
}: ToggleStatusProps) {
function handleToggle() {
onToggle?.();
router.post(url, {}, { preserveScroll: true });
}
return (
<div className={wrapperClassName}>
<Switch
size="sm"
checked={checked}
onCheckedChange={handleToggle}
disabled={disabled}
/>
{label && (
<span
className={`text-xs font-medium ${checked ? 'text-green-700' : 'text-red-700'}`}
>
{label}
</span>
)}
</div>
);
}