forked from OctoWoW/OctoLauncher
OctoWoW
57 lines
986 B
TypeScript
57 lines
986 B
TypeScript
import cls from 'classnames';
|
|
import { type ReactNode } from 'react';
|
|
|
|
import TextButton from '../styled/TextButton';
|
|
|
|
const Checkbox = () => (
|
|
<svg
|
|
width={16}
|
|
height={16}
|
|
viewBox="0 0 12 12"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="shrink-0"
|
|
>
|
|
<rect
|
|
x="1"
|
|
y="1"
|
|
width="10"
|
|
height="10"
|
|
rx="1"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
/>
|
|
<rect x="3.5" y="3.5" width="5" height="5" fill="white" />
|
|
</svg>
|
|
);
|
|
|
|
type Props = {
|
|
label?: ReactNode;
|
|
value: boolean;
|
|
setValue: (v: boolean) => void;
|
|
disabled?: boolean;
|
|
className?: cls.Value;
|
|
};
|
|
|
|
const CheckboxInput = ({
|
|
label,
|
|
value,
|
|
setValue,
|
|
disabled,
|
|
className
|
|
}: Props) => (
|
|
<TextButton
|
|
onClick={() => !disabled && setValue(!value)}
|
|
icon={Checkbox}
|
|
className={cls(
|
|
'!items-start text-left text-blueGray',
|
|
{ '[&_*]:fill-none': !value, 'pointer-events-none opacity-40': disabled },
|
|
className
|
|
)}
|
|
>
|
|
{label}
|
|
</TextButton>
|
|
);
|
|
|
|
export default CheckboxInput;
|