52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
interface ToggleComponentProps<T> {
|
|
optionName: string;
|
|
value: T;
|
|
leftLabel: {
|
|
value: T;
|
|
label?: string;
|
|
};
|
|
rightLabel: {
|
|
value: T;
|
|
label?: string;
|
|
};
|
|
backgroundColor: string;
|
|
disabled?: boolean;
|
|
setValue: (value: T) => void;
|
|
}
|
|
|
|
const ToggleComponentKH = <T,>({
|
|
optionName,
|
|
value,
|
|
leftLabel,
|
|
rightLabel,
|
|
backgroundColor,
|
|
disabled,
|
|
setValue,
|
|
}: ToggleComponentProps<T>) => {
|
|
return (
|
|
<div className="flex w-full items-center justify-between text-xs">
|
|
<span>{optionName}</span>
|
|
<div className="inline-flex w-1/2 rounded-md shadow-sm">
|
|
<button
|
|
type="button"
|
|
className={`${value === leftLabel.value ? 'bg-green-700' : backgroundColor} w-1/2 rounded-l-lg border border-white px-4 py-2 text-white disabled:pointer-events-none disabled:opacity-50`}
|
|
onClick={() => setValue(leftLabel.value)}
|
|
disabled={disabled}
|
|
>
|
|
{leftLabel.label || 'Enabled'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={`${value === rightLabel.value ? 'bg-green-700' : backgroundColor} w-1/2 rounded-r-md border border-white px-4 py-2 text-white disabled:pointer-events-none disabled:opacity-50`}
|
|
onClick={() => setValue(rightLabel.value)}
|
|
disabled={disabled}
|
|
>
|
|
{rightLabel.label || 'Disabled'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ToggleComponentKH;
|