yoginth.com / hey
Hey is a decentralized and permissionless social media app built with Lens Protocol 🌿
fork atom

feat: add cva variants to toggle (#5889)

authored by yoginth.com and committed by

GitHub 77b099cb 71b0a119

+25 -14
+25 -14
apps/web/src/components/Shared/UI/Toggle.tsx
··· 1 1 import { Switch } from "@headlessui/react"; 2 + import { cva } from "class-variance-authority"; 2 3 import { memo } from "react"; 3 - import cn from "@/helpers/cn"; 4 4 5 5 interface ToggleProps { 6 6 disabled?: boolean; ··· 8 8 setOn: (on: boolean) => void; 9 9 } 10 10 11 + const 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 + 25 + const 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 + 11 33 const Toggle = ({ disabled = false, on, setOn }: ToggleProps) => { 12 34 return ( 13 35 <Switch 14 36 checked={on} 15 - className={({ checked }) => 16 - cn( 17 - checked ? "bg-black dark:bg-white" : "bg-gray-200 dark:bg-gray-500", 18 - disabled && "cursor-not-allowed opacity-50", 19 - "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" 20 - ) 21 - } 37 + className={switchVariants({ checked: on, disabled })} 22 38 disabled={disabled} 23 39 onChange={setOn} 24 40 > 25 - <span 26 - className={cn( 27 - on ? "translate-x-5" : "translate-x-0", 28 - "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" 29 - )} 30 - /> 41 + <span className={thumbVariants({ checked: on })} /> 31 42 </Switch> 32 43 ); 33 44 };