Tabs

import React, { useState } from 'react';
import { TabContent, TabPane, Nav, NavItem, NavLink, Row, Col } from 'seduo-ui';
import classnames from 'classnames';

const Example = () => {
    const [activeTab, setActiveTab] = useState('1');

    const toggle = (tab) => {
        if (activeTab !== tab) setActiveTab(tab);
    };

    return (
        <div>
            <Nav tabs>
                <NavItem>
                    <NavLink
                        className={classnames({
                            active: activeTab === '1',
                        })}
                        onClick={() => {
                            toggle('1');
                        }}
                    >
                        Tab 1
                    </NavLink>
                </NavItem>
                <NavItem>
                    <NavLink
                        className={classnames({
                            active: activeTab === '2',
                        })}
                        onClick={() => {
                            toggle('2');
                        }}
                    >
                        Tab 2
                    </NavLink>
                </NavItem>
            </Nav>
            <TabContent activeTab={activeTab}>
                <TabPane tabId="1">
                    <Row>
                        <Col sm="12">
                            <h4>Tab 1 Contents</h4>
                        </Col>
                    </Row>
                </TabPane>
                <TabPane tabId="2">
                    <Row>
                        <Col sm="12">
                            <h4>Tab 2 Contents</h4>
                        </Col>
                    </Row>
                </TabPane>
            </TabContent>
        </div>
    );
};

export default Example;

Custom tabs

import React, { useState } from 'react';
import { TabContent, TabPane, NavItem, NavLink, Row, Col } from 'seduo-ui';
import classnames from 'classnames';

const Example = () => {
    const [activeTab, setActiveTab] = useState('1');

    const toggle = (tab) => {
        if (activeTab !== tab) setActiveTab(tab);
    };

    return (
        <div>
            <div className="nav-tabs-wrapper">
                <ul className="nav nav-tabs nav-tabs--custom">
                    <NavItem>
                        <NavLink
                            className={classnames({
                                active: activeTab === '1',
                            })}
                            onClick={() => {
                                toggle('1');
                            }}
                        >
                            Tab 1
                        </NavLink>
                    </NavItem>
                    <NavItem>
                        <NavLink
                            className={classnames({
                                active: activeTab === '2',
                            })}
                            onClick={() => {
                                toggle('2');
                            }}
                        >
                            Tab 2
                        </NavLink>
                    </NavItem>
                </ul>
            </div>
            <TabContent activeTab={activeTab}>
                <TabPane tabId="1">
                    <Row>
                        <Col sm="12">
                            <h4>Tab 1 Contents</h4>
                        </Col>
                    </Row>
                </TabPane>
                <TabPane tabId="2">
                    <Row>
                        <Col sm="12">
                            <h4>Tab 2 Contents</h4>
                        </Col>
                    </Row>
                </TabPane>
            </TabContent>
        </div>
    );
};

export default Example;