AbdulElahGwaith/free-react-tailwind-admin-dashboard

1import { useState } from "react";2import ComponentCard from "../../common/ComponentCard";3import Checkbox from "../input/Checkbox";4 5export default function CheckboxComponents() {6  const [isChecked, setIsChecked] = useState(false);7  const [isCheckedTwo, setIsCheckedTwo] = useState(true);8  const [isCheckedDisabled, setIsCheckedDisabled] = useState(false);9  return (10    <ComponentCard title="Checkbox">11      <div className="flex items-center gap-4">12        <div className="flex items-center gap-3">13          <Checkbox checked={isChecked} onChange={setIsChecked} />14          <span className="block text-sm font-medium text-gray-700 dark:text-gray-400">15            Default16          </span>17        </div>18        <div className="flex items-center gap-3">19          <Checkbox20            checked={isCheckedTwo}21            onChange={setIsCheckedTwo}22            label="Checked"23          />24        </div>25        <div className="flex items-center gap-3">26          <Checkbox27            checked={isCheckedDisabled}28            onChange={setIsCheckedDisabled}29            disabled30            label="Disabled"31          />32        </div>33      </div>34    </ComponentCard>35  );36}37