31 lines
920 B
TypeScript
31 lines
920 B
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
export function Switch({
|
||
|
|
checked,
|
||
|
|
onChange,
|
||
|
|
disabled,
|
||
|
|
}: {
|
||
|
|
checked: boolean;
|
||
|
|
onChange: (checked: boolean) => void;
|
||
|
|
disabled?: boolean;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
role="switch"
|
||
|
|
aria-checked={checked}
|
||
|
|
disabled={disabled}
|
||
|
|
onClick={() => onChange(!checked)}
|
||
|
|
className={`relative w-11 h-6 rounded-(--radius-full) transition-colors duration-200 shrink-0 disabled:opacity-50 cursor-pointer ${
|
||
|
|
checked ? "bg-(--color-brand-500)" : "bg-(--color-bg-tertiary)"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{/* از insetInlineStart استفاده میکنیم (نه left/right) تا توی حالت RTL درست جابهجا بشه */}
|
||
|
|
<span
|
||
|
|
className="absolute top-0.5 w-5 h-5 rounded-full bg-white shadow-(--shadow-cute-sm) transition-all duration-200"
|
||
|
|
style={{ insetInlineStart: checked ? "22px" : "2px" }}
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
}
|