Tabs

import { Tabs } from '@base-ui/react/tabs';

const TABS = [
  {
    value: 'overview',
    label: 'Overview',
    body: 'Status, owners, and the next milestone.'
  },
  {
    value: 'activity',
    label: 'Activity',
    body: 'Every edit, comment, and deploy, newest first.'
  },
  {
    value: 'settings',
    label: 'Settings',
    body: 'Name, visibility, and who can publish.'
  }
];

// Base UI handles role='tablist', aria-selected, and the arrow keys.
export function ProjectTabs() {
  return (
    <Tabs.Root defaultValue='overview' className='w-96'>
      <Tabs.List className='relative flex gap-5 border-b'>
        {TABS.map((tab) => (
          <Tabs.Tab
            key={tab.value}
            value={tab.value}
            className='pb-2 text-sm font-medium text-muted-foreground outline-none hover:text-foreground focus-visible:text-foreground data-active:text-foreground'
          >
            {tab.label}
          </Tabs.Tab>
        ))}
        {/* The indicator reads the active tab's size and position from CSS variables. */}
        <Tabs.Indicator className='absolute -bottom-px left-0 h-0.5 w-(--active-tab-width) translate-x-(--active-tab-left) bg-blue-600 transition-[width,translate] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)]' />
      </Tabs.List>
      {/* Panels share one grid cell so the old one fades out under the new one. */}
      <div className='grid'>
        {TABS.map((tab) => (
          <Tabs.Panel
            key={tab.value}
            value={tab.value}
            className='col-start-1 row-start-1 py-4 text-sm transition-opacity duration-200 outline-none data-ending-style:opacity-0 data-starting-style:opacity-0'
          >
            {tab.body}
          </Tabs.Panel>
        ))}
      </div>
    </Tabs.Root>
  );
}