Function Tab

src/showcase/components/tabs/IconTabs.tsx:50–82

({ text, selected, setSelected, index, children }: TabProps)

}

const Tab = ({ text, selected, setSelected, index, children }: TabProps) => {
  return (
    <motion.button
      variants={buttonVariants}
      initial="initial"
      animate="animate"
      custom={selected}
      onClick={() => setSelected(tabs[index])}
      transition={transition}
      className={`${
        selected
          ? 'bg-red-500/15 text-red-500 '
          : ' hover:text-gray-900 dark:hover:text-gray-100'
      } relative flex items-center rounded-full px-4 py-2 text-sm font-medium text-gray-500 transition-colors duration-300 focus-within:outline-red-500/50`}
    >
      {children}
      <AnimatePresence>
        {selected && (
          <motion.span
            variants={spanVariants}
            initial="initial"
            animate="animate"
            exit="exit"
            transition={transition}
            className="overflow-hidden"
          >
            {text}
          </motion.span>
        )}
      </AnimatePresence>
    </motion.button>
  )
}

// IconTabs component
const IconTabs = ({ center }: { center?: boolean }) => {