Tabs

import { Tabs, TabList, TabItem, TabLink, TabContent, TabPane, Badge, TabsToggler } from "@seduo/design-system";
...
const [selectedTabId, setSelectedTab] = useState<number>(1);

const selectTab: TabsToggler = useCallback((tabId) => {
    setSelectedTab(tabId as number);
}, []);
...
<Tabs selectedTab={selectedTabId} toggle={selectTab}>
    <TabList>
        <TabItem forTabPane={1}>Tab Active<span className="ml-400"><Badge size="xsmall">Badge</Badge></span></TabItem>
        <TabItem forTabPane={2}>Item</TabItem>
        <TabLink href="https://www.example.com">Item Link</TabLink>
    </TabList>
    <TabContent>
        <TabPane id={1}>Pane 1</TabPane>
        <TabPane id={2}>Pane 2</TabPane>
    </TabContent>
</Tabs>

import { UncontrolledTabs, TabList, TabItem, TabLink, TabContent, TabPane, Badge } from "@seduo/design-system";
...
<UncontrolledTabs defaultSelectedTab={1}>
    <TabList>
        <TabItem forTabPane={1}>Tab Active<span className="ml-400"><Badge size="xsmall">Badge</Badge></span></TabItem>
        <TabItem forTabPane={2}>Tab</TabItem>
        <TabLink href="#">Tab Link</TabLink>
    </TabList>
    <TabContent>
        <TabPane id={1}>Pane 1</TabPane>
        <TabPane id={2}>Pane 2</TabPane>
    </TabContent>
</UncontrolledTabs>

<TabList>
    <TabItem>
        <TabLink isSelected id="pane1-tab" target="pane1">
            Tab Active<span class="ml-400"><Badge size="xsmall">Badge</Badge></span>
        </TabLink>
    </TabItem>
    <TabItem>
        <TabLink id="pane2-tab" target="pane2">
            Tab
        </TabLink>
    </TabItem>
    <TabItem>
        <TabLink href="#">
            Tab Link
        </TabLink>
    </TabItem>
</TabList>
<TabPane id="pane1" isSelected label="pane1-tab">
    Pane 1
</TabPane>
<TabPane id="pane2" label="pane2-tab">
    Pane 2
</TabPane>