Tabs

() => {
  return (
    <Tabs onSelect={index => console.log(index)}>
      <TabList>
        {Object.keys(tabs).map(key => (
          <Tab key={`tab_${key}`}>{key}</Tab>
        ))}
      </TabList>
      {Object.keys(tabs).map(key => (
        <TabPanel key={`panel_${key}`}>{tabs[key]}</TabPanel>
      ))}
    </Tabs>
  );
}

() => {
  return (
    <Tabs onSelect={index => console.log(index)} dir="rtl">
      <TabList>
        {Object.keys(tabs).map(key => (
          <Tab key={`tab_${key}`}>{key}</Tab>
        ))}
      </TabList>
      {Object.keys(tabs).map(key => (
        <TabPanel key={`panel_${key}`}>{tabs[key]}</TabPanel>
      ))}
    </Tabs>
  );
}

() => {
  return (
    <Tabs fontSize={4}>
      <TabList>
        {Object.keys(tabs).map(key => (
          <Tab key={`tab_${key}`}>{key}</Tab>
        ))}
      </TabList>
      {Object.keys(tabs).map(key => (
        <TabPanel key={`panel_${key}`}>{tabs[key]}</TabPanel>
      ))}
    </Tabs>
  );
}