Animate Checkbox

import { Checkbox } from "@/components/ui/animate-checkbox";

export default function DemoOne() {
  return <div className="flex flex-col gap-6">
      <div className="flex items-center gap-2">
        <Checkbox />
        <div><a className='underline pointer-cursor' target="_blank" href="https://moleculeui.design" variant='link'>Checkout Molecule UI</a></div>
      </div>

      <div className="flex items-center gap-2">
        <Checkbox defaultChecked />
        <div><a className='underline pointer-cursor'  target="_blank" href="https://moleculeui.design" variant='link'>Checkout Molecule UI</a></div>
      </div>

      <div className="flex items-center gap-2">
        <Checkbox
          defaultChecked
          className="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white "
        />
        <div>Enable Notification</div>
      </div>

    </div>;
}