Tabs

import { Tabs, useTab } from 'welcome-ui/Tabs'

const Example = () => {
  const tab = useTab({ defaultSelectedId: 'tab1' })

  return (
    <>
      <div>
        <Tabs aria-label="Tabs" store={tab}>
          <Tabs.Tab id="tab1" store={tab}>
            Tab 1
          </Tabs.Tab>
          <Tabs.Tab id="tab2" store={tab}>
            Tab 2
          </Tabs.Tab>
          <Tabs.Tab id="tab3" store={tab}>
            Tab 3
          </Tabs.Tab>
          <Tabs.Tab id="tab4" store={tab}>
            Tab 4
          </Tabs.Tab>
          <Tabs.Tab disabled id="tab5" store={tab}>
            Tab 5
          </Tabs.Tab>
        </Tabs>
      </div>

      <div className="w-full border border-neutral-20 p-lg rounded-md">
        <Tabs.Panel store={tab} tabId="tab1">
          Content for Tab 1
        </Tabs.Panel>
        <Tabs.Panel store={tab} tabId="tab2">
          Content for Tab 2
        </Tabs.Panel>
        <Tabs.Panel store={tab} tabId="tab3">
          Content for Tab 3
        </Tabs.Panel>
        <Tabs.Panel store={tab} tabId="tab4">
          Content for Tab 4
        </Tabs.Panel>
        <Tabs.Panel store={tab} tabId="tab5">
          Content for Tab 5
        </Tabs.Panel>
      </div>
    </>
  )
}

export default Example