Function Tabs

components/tabs/tabs.tsx:14–39

({ className, items }: TabsProps)

}

export function Tabs({ className, items }: TabsProps) {
  const [activeTab, setActiveTab] = useState(items[0].value);

  const handleTabClick = useCallback((value: TabProps['value']) => {
    setActiveTab(value);
  }, []);

  return (
    <div className='w-full'>
      <div className={clsxMerge('mb-4 border-b border-gray-200', className)}>
        <ul className='-mb-px flex space-x-6 overflow-auto text-center text-sm font-medium' role='tablist'>
          {items.map(({ content: _, ...props }, index) => (
            <Tab key={index} isActive={props.value === activeTab} onClick={handleTabClick} {...props} />
          ))}
        </ul>
      </div>
      <div>
        {items.map(({ value, content }, index) => (
          <div key={index} id={kebabCase(`tab-panel-${index}`)} className={clsxMerge({ hidden: value !== activeTab })}>
            {content}
          </div>
        ))}
      </div>
    </div>
  );
}

Tabs.displayName = 'Tabs';