import {Btn} from '../../AbstractElements'
<Btn attrBtn={{color:"primary"}} >Primary</Btn>
<Btn attrBtn={{color:"secondary"}} >Secondary</Btn>
<Btn attrBtn={{color:"success"}} >Success</Btn>
<Btn attrBtn={{color:"info"}} >Info</Btn>
<Btn attrBtn={{color:"warning"}} >Warning</Btn>
<Btn attrBtn={{color:"danger"}} >Danger</Btn>

import {Progressbar} from '../../AbstractElements'
  <Progressbar attrProgress={{ value: '0' }} />
  <Progressbar attrProgress={{ color: 'primary', value: '25' }} />
  <Progressbar attrProgress={{ color: 'secondary', value: '50' }} />
  <Progressbar attrProgress={{ color: 'success', value: '75' }} />
                                 

import {Alerts} from '../../AbstractElements';
  <Alerts attrAlert={{color:'primary dark'}} >This is a info alert—check it out!</Alerts>
  <Alerts attrAlert={{color:'secondary dark'}} >This is a light alert—check it out!</Alerts>
  <Alerts attrAlert={{color:'success dark'}}>This is a success alert—check it out!</Alerts>
  <Alerts attrAlert={{color:'info dark'}}>This is a danger alert—check it out!</Alerts>
  <Alerts attrAlert={{color:'warning dark'}}>This is a secondary alert—check it out!</Alerts>
  <Alerts attrAlert={{color:'danger dark'}}>This is a warning alert—check it out!</Alerts>
  <Alerts attrAlert={{color:'light dark'}}>This is a dark alert—check it out!</Alerts>
  <Alerts attrAlert={{color:'dark dark'}}>This is a dark alert—check it out!</Alerts>

import {popover,popoverHeader,popoverBody} from 'reactstrap'
  <Popover
  placement='right'
  isOpen={popover}
  target='Popover-1'
  toggle={Toggle}
  >
  <PopoverHeader>Popover title</PopoverHeader>
  <PopoverBody>
    And heres some amazing content. Its very engaging. Right?
    </PopoverBody>
    </Popover>
                                 

import {Dropdown,DropdownMenu,DropdownItem} from 'reactstrap';
import { Btn } from '../../AbstractElements';

const Dropdowns = (props) => {
  return(
    <Dropdown>
      <Btn attrBtn={{color:"primary" , className:"dropbtn"}} >
      Dropdown Button
      <span><i className="icofont icofont-arrow-down"></i></span>
      </Btn>
      <DropdownMenu className="dropdown-content">
          <DropdownItem href="#">Action </DropdownItem>
          <DropdownItem href="#">Another Action </DropdownItem>
          <DropdownItem href="#">Something Else Here </DropdownItem>
      </DropdownMenu>
    </Dropdown>
                                   )
                                 }

const TabsExample = (props) => {
  const [BasicTab, setBasicTab] = useState('1');
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const toggle = () => setDropdownOpen(prevState => !prevState);
  return(
  <CardBody>
      <Nav tabs>
        <NavItem>
            <NavLink href="#javascript"  className={BasicTab === '1' ? 'active' : ''} onClick={() => setBasicTab('1')}>Home</NavLink>
        </NavItem>
        <Dropdown className="nav-item" isOpen={dropdownOpen} toggle={toggle}>
          <NavItem>
          <DropdownToggle className="nav-link" tag="a" href="#javascript"  color="default" caret>
            Dropdown
          </DropdownToggle>
          <DropdownMenu>
              <NavLink href="#javascript" className={BasicTab === '2' ? 'active' : ''} onClick={() => setBasicTab('2')}>Action</NavLink>
              <DropdownItem href="#javascript" >Another action</DropdownItem>
              <DropdownItem href="#javascript">Something else here</DropdownItem>
              <DropdownItem divider/>
              <DropdownItem href="#javascript">Separated link</DropdownItem>
          </DropdownMenu>
          </NavItem>
        </Dropdown>
        <NavItem>
          <NavLink href="#javascript" className={BasicTab === '3' ? 'active' : ''} onClick={() => setBasicTab('3')}>Profile</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#javascript" className={BasicTab === '4' ? 'active' : ''} onClick={() => setBasicTab('4')}>Contact</NavLink>
        </NavItem>
      </Nav>
      <TabContent activeTab={BasicTab}>
        <TabPane  className="fade show" tabId="1">
        <p attrPara={{ className:"mb-0 m-t-30"}} >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 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</p>
        </TabPane>
        <TabPane tabId="2">
        <p attrPara={{ className:"mb-0 m-t-30"}} >Lorem Ipsum is 111 simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 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</p>
        </TabPane>
        <TabPane tabId="3">
        <p attrPara={{ className:"mb-0 m-t-30"}} >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 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</p>
        </TabPane>
        <TabPane tabId="4">
        <p attrPara={{ className:"mb-0 m-t-30"}} >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 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</p>
        </TabPane>
      </TabContent>
  </CardBody>
                                 )
                               }

import {Accordion} from 'react-bootstrap'

<Accordion defaultActiveKey="0">
  <Accordion.Toggle  className="btn btn-link" color="default" eventKey="0">
      Collapsible Group Item #<span className="digits">1</span>
  </Accordion.Toggle>

  <Accordion.Collapse eventKey="0">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
  </Accordion.Collapse>
  <Accordion.Toggle  className="btn btn-link" color="default" eventKey="1">
      Collapsible Group Item #<span className="digits">2</span>
  </Accordion.Toggle>

  <Accordion.Collapse eventKey="1">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
  </Accordion.Collapse>
  <Accordion.Toggle  className="btn btn-link" color="default" eventKey="2">
      Collapsible Group Item #<span className="digits">3</span>
  </Accordion.Toggle>

  <Accordion.Collapse eventKey="2">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
  </Accordion.Collapse>
</Accordion>