yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { Switch } from "@headlessui/react";
2import { cva } from "class-variance-authority";
3import { memo } from "react";
4
5interface ToggleProps {
6 disabled?: boolean;
7 on: boolean;
8 setOn: (on: boolean) => void;
9}
10
11const switchVariants = cva(
12 "inline-flex h-[22px] w-[42.5px] min-w-[42.5px] items-center rounded-full border-2 border-transparent outline-hidden duration-200 ease-in-out",
13 {
14 defaultVariants: { checked: false, disabled: false },
15 variants: {
16 checked: {
17 false: "bg-gray-200 dark:bg-gray-500",
18 true: "bg-black dark:bg-white"
19 },
20 disabled: { false: "", true: "cursor-not-allowed opacity-50" }
21 }
22 }
23);
24
25const thumbVariants = cva(
26 "pointer-events-none inline-block size-[18px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out dark:bg-black",
27 {
28 defaultVariants: { checked: false },
29 variants: { checked: { false: "translate-x-0", true: "translate-x-5" } }
30 }
31);
32
33const Toggle = ({ disabled = false, on, setOn }: ToggleProps) => {
34 return (
35 <Switch
36 checked={on}
37 className={switchVariants({ checked: on, disabled })}
38 disabled={disabled}
39 onChange={setOn}
40 >
41 <span className={thumbVariants({ checked: on })} />
42 </Switch>
43 );
44};
45
46export default memo(Toggle);