yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { cva, type VariantProps } from "class-variance-authority";
2import type { ComponentProps } from "react";
3import { forwardRef, memo, useId } from "react";
4
5const checkboxVariants = cva(
6 "outline-0 focus:ring-0 mr-2 cursor-pointer rounded transition duration-200 dark:text-gray-500",
7 {
8 defaultVariants: { disabled: false },
9 variants: {
10 disabled: {
11 false: "",
12 true: "cursor-not-allowed opacity-50"
13 }
14 }
15 }
16);
17
18interface CheckboxProps
19 extends Omit<ComponentProps<"input">, "prefix" | "disabled">,
20 VariantProps<typeof checkboxVariants> {
21 className?: string;
22 label?: string;
23}
24
25const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
26 ({ className = "", label, disabled, ...props }, ref) => {
27 const id = useId();
28
29 return (
30 <div className="flex items-center">
31 <input
32 className={checkboxVariants({ className, disabled })}
33 disabled={Boolean(disabled)}
34 id={id}
35 ref={ref}
36 type="checkbox"
37 {...props}
38 />
39 <label
40 className="inline-block cursor-pointer whitespace-nowrap"
41 htmlFor={id}
42 >
43 {label}
44 </label>
45 </div>
46 );
47 }
48);
49
50export default memo(Checkbox);