Function Label

src/showcase/components/toggle/SlideToggle.tsx:23–75

({ children, isOn })

}

const Label: React.FC<LabelProps> = ({ children, isOn }) => {
  const context = useContext(SlideToggleContext)

  if (!context) {
    throw new Error('Context Error!')
  }

  const { toggled } = context

  return (
    <AnimatePresence initial={false}>
      {(isOn && toggled) || (!isOn && !toggled) ? (
        <motion.div
          initial={{
            x: isOn ? -20 : 20,
            opacity: 0,
          }}
          animate={{
            x: 0,
            opacity: 1,
          }}
          exit={{
            x: isOn ? -20 : 20,
            opacity: 0,
            transition: {
              type: 'spring',
              delay: 0.0,
              bounce: 0,
              duration: 0.3,
            },
          }}
          transition={{
            type: 'spring',
            delay: 0.1,
            bounce: 0,
            duration: 0.6,
          }}
          className={`absolute ${
            isOn ? 'left-0 z-10' : 'right-0'
          } p-2 ${isOn ? 'pr-[25px]' : 'pl-[25px]'}`}
        >
          <span
            className={`text-nowrap text-xs font-medium tracking-tight ${
              isOn ? 'text-white' : 'fill-black/40 text-black/40'
            }`}
          >
            {children}
          </span>
        </motion.div>
      ) : null}
    </AnimatePresence>
  )
}

const SlideToggle: React.FC<SlideToggleProps> = ({
  onToggle,