Tabs - Type B

This is another tabs component. Tabs make it easy to switch between different views. It differs from the TabsTypeA component only in terms of props and the boilerplate code, but it works exactly the same.

Props

Props	Type	Required	Description
children	Array<JSX.Element>	Yes	The children is tab data which is used to render the tabs and their content
tabHandler	function	Yes	If you want to do something on switching tabs, then you can do it by passing the tabHandler function
activeTab	number	Yes	It is the index of active tab that you set in the tabHandler function

http://localhost:3000

Dummy Component-1

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

src/components/ExampleTabs/index.tsx

import { useState } from "react";
import {
  PanelContainer,
  Tab,
  TabPanel,
  TabsTypeB,
  DummyComponent1,
  DummyComponent2,
  DummyComponent3,
} from "canary-design";

const ExampleTabsTypeB = () => {
  const [activeTab, setActiveTab] = useState(0);

  const tabHandler = (index: number) => {
    setActiveTab(index);
    console.log(`active tab index: ${index}`);
  };

  const tabsArray = ["Tab 1", "Tab 2", "Tab 3"];

  return (
    <>
      <TabsTypeB tabHandler={tabHandler} activeTab={activeTab}>
        {tabsArray.map((tab, index) => (
          <Tab key={index} label={tab} />
        ))}
      </TabsTypeB>

      <PanelContainer activeTab={activeTab}>
        <TabPanel>
          <DummyComponent1 />
        </TabPanel>
        <TabPanel>
          <DummyComponent2 />
        </TabPanel>
        <TabPanel>
          <DummyComponent3 />
        </TabPanel>
      </PanelContainer>
    </>
  );
};

export { ExampleTabsTypeB };