54 lines
1.9 KiB
TypeScript
54 lines
1.9 KiB
TypeScript
import MinusIcon from "./icons/MinusIcon";
|
|
import SelectedCheckboxIcon from "./icons/SelectedCheckboxIcon";
|
|
import { ICheckbox } from "../types/checkbox";
|
|
|
|
interface CheckboxProps {
|
|
onClick: (id: string) => void;
|
|
checkbox: ICheckbox;
|
|
}
|
|
|
|
const Checkbox = ({ onClick, checkbox }: CheckboxProps) => {
|
|
return (
|
|
<div
|
|
onClick={() => onClick(checkbox.id)}
|
|
className={`flex justify-between bg-white p-3 rounded-lg transition-[background] duration-300 ease-in-out select-none ${
|
|
checkbox.disabled
|
|
? "pointer-events-none touch-none"
|
|
: "hover:bg-[#F3F3F2] cursor-pointer"
|
|
}`}
|
|
>
|
|
<div className="flex gap-3">
|
|
{checkbox.disabled ? (
|
|
<div className="bg-[#E2E2DC] rounded-[4px] w-6 h-6 text-white flex justify-center items-center">
|
|
<MinusIcon />
|
|
</div>
|
|
) : (
|
|
<div
|
|
className={` rounded-[4px] w-6 h-6 flex justify-center items-center ease-in-out duration-300 transition-[background] ${
|
|
checkbox.selected ? "bg-[#00BED7]" : "bg-[#E2E2DC]"
|
|
}`}
|
|
>
|
|
{checkbox.selected ? <SelectedCheckboxIcon /> : <></>}
|
|
</div>
|
|
)}
|
|
<p className="text-s text-[#73787C]">{checkbox.title}</p>
|
|
</div>
|
|
{!checkbox.disabled ? (
|
|
<div className="bg-[#00BED7] rounded-full text-white w-6 h-6 flex items-center justify-center font-semibold text-caption-s ">
|
|
<div className="h-fit align-middle text-center flex items-center justify-center leading-1">
|
|
8
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="bg-[#E2E2DC] rounded-full text-white w-6 h-6 flex items-center justify-center font-semibold text-caption-s">
|
|
<div className="h-fit align-middle text-center flex">
|
|
<MinusIcon />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Checkbox;
|