1
2"use client"
3import { AnimatePresence, motion } from "framer-motion";
4import { Check } from "lucide-react";
5import { cn } from "@/utils/cn";
6import React, { InputHTMLAttributes, useState } from "react";
7
8type ToggleProps = {
9  label?: string;
10  className?: string;
11} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange">;
12
13const Checkbox: React.FC<ToggleProps> = ({ label, className, ...props }) => {
14  const [isChecked, setIsChecked] = useState(false);
15
16  const handleChange = () => {
17    setIsChecked(!isChecked);
18  };
19
20  return (
21    <div className="flex items-center">
22      <input
23        type="checkbox"
24        className={cn(
25          "relative hidden h-4 w-4 cursor-pointer appearance-none rounded border-2 border-pink-300 outline-none transition-colors duration-300 before:absolute before:left-1/2 before:top-1/2 before:h-3 before:w-3 before:-translate-x-1/2 before:-translate-y-1/2 before:scale-0 before:rounded before:bg-rose-500 before:text-xl before:font-bold before:text-white before:content-['✓'] checked:border-rose-500 checked:bg-rose-500 checked:before:scale-100 hover:border-pink-500 focus:border-pink-500",
26          className,
27        )}
28        checked={isChecked}
29        onChange={handleChange}
30        {...props}
31      />
32      <label
33        className="flex cursor-pointer items-center"
34        onClick={handleChange}
35      >
36        <div
37          className={cn(
38            "relative h-6 w-6 flex-shrink-0 rounded border-2 border-rose-500",
39            className,
40          )}
41        >
42          <AnimatePresence>
43            {isChecked && (
44              <div
45                className={cn(
46                  "absolute left-0 top-0 flex h-full w-full items-center justify-center overflow-x-hidden bg-rose-500 text-white",
47                  className,
48                )}
49              >
50                <motion.div
51                  className="overflow-x-hidden"
52                  initial={{ opacity: 1, width: 0, scale: 0 }}
53                  animate={{ opacity: 1, width: "max-content", scale: 1 }}
54                  exit={{ opacity: 1, scale: 0 }}
55                  transition={{ duration: 0.2, ease: "easeInOut" }}
56                >
57                  <Check strokeWidth={4} size={16} />
58                </motion.div>
59              </div>
60            )}
61          </AnimatePresence>
62        </div>
63        <span
64          className={cn(
65            "ml-2 font-geist font-semibold text-rose-100",
66            className,
67          )}
68        >
69          {label}
70        </span>
71      </label>
72    </div>
73  );
74};
75
76export default Checkbox;
77