Tabs

const Controlled = () => {
  const [value, setValue] = useState('value1');

  return (
    <Tabs value={value} onChange={(newValue) => setValue(newValue)}>
      <Tabs.List>
        <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
        <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
        <Tabs.Tab value='value3'>Tab 3</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel value='value1'>content 1</Tabs.Panel>
      <Tabs.Panel value='value2'>content 2</Tabs.Panel>
      <Tabs.Panel value='value3'>content 3</Tabs.Panel>
    </Tabs>
  );
};

render(<Controlled />)

const PanelReuse = () => {
  const [selectedTab, setSelectedTab] = useState('Om');
  const tabs = [
    ['Om', <div key='about'>Om</div>],
    ['Timeplan', <div key='timetable'>Timeplan</div>],
    ['Eksamen', <div key='exam'>Eksamen</div>],
  ] as const;

  return (
    <Tabs defaultValue={selectedTab} onChange={setSelectedTab}>
      <Tabs.List>
        {tabs.map(([label]) => (
          <Tabs.Tab
            key={label}
            value={label}
            aria-selected={`${selectedTab === label}`}
          >
            {label}
          </Tabs.Tab>
        ))}
      </Tabs.List>
      {tabs.map(([label, content]) => (
        <Tabs.Panel key={label} value={label} hidden={selectedTab !== label}>
          {content}
        </Tabs.Panel>
      ))}
    </Tabs>
  );
};

render(<PanelReuse />)