text: import React, { useState } from 'react'
  import { TabContent, TabPane, Nav, NavItem, NavLink, Row, Col } from 'reactstrap'
  import classnames from 'classnames'
  import Magang from './Magang'
  import PKL from './PKL'
  
  const Kehadiran = () => {
    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')
              }}
            >
              Magang
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink
              className={classnames({ active: activeTab === '2' })}
              onClick={() => {
                toggle('2')
              }}
            >
              PKL
            </NavLink>
          </NavItem>
        </Nav>
        <TabContent activeTab={activeTab}>
          <TabPane tabId="1">
            <Row>
              <Col sm="12">
                <Magang />
              </Col>
            </Row>
          </TabPane>
          <TabPane tabId="2">
            <Row>
              <Col sm="12">
                <PKL />
              </Col>
            </Row>
          </TabPane>
        </TabContent>
      </div>
    )
  }
  
  export default Kehadiran
  