import { Btn } from '../../../../AbstractElements';

<Btn color="primary">Primary</Btn>
<Btn color="secondary">Secondary</Btn>
<Btn color="success">Success</Btn>
<Btn color="info">Info</Btn>
<Btn color="warning">Warning</Btn>
<Btn color="danger">Danger</Btn>
<Btn color="light">Light</Btn>

import { Badges } from "../../../../AbstractElements";

<Badges color="primary">Primary</Badges>
<Badges color="secondary">Secondary</Badges>
<Badges color="success">Success</Badges>
<Badges color="info">Info</Badges>
<Badges color="warning text-dark">Warning</Badges>
<Badges color="danger">Danger</Badges>
<Badges color="light text-dark">Light</Badges>
<Badges color="dark">Dark</Badges>

import { Progressbar } from '../../../../AbstractElements'

<Progressbar value={0}/>
<Progressbar color="primary" value={25}/>
<Progressbar color="secondary" value={50}/>
<Progressbar color="success" value={75}/>
<Progressbar color="info" value={100}/>

import { Alerts } from '../../../../AbstractElements'

<Alerts color="primary">This is a primary alert—check it out!</Alerts>
<Alerts color="secondary">This is a secondary alert—check it out!</Alerts>
<Alerts color="success">This is a success alert—check it out!</Alerts>
<Alerts color="info">This is a info alert—check it out!</Alerts>
<Alerts color="warning">This is a warning alert—check it out!</Alerts>
<Alerts color="danger">This is a danger alert—check it out!</Alerts>
<Alerts color="light">This is a light alert—check it out!</Alerts>
<Alerts color="dark">This is a dark alert—check it out!</Alerts>

import { Btn, Popovers } from '../../../../AbstractElements';

const [basicPopover, setBasicPopover] = useState(false);
const basicToggle = () => setBasicPopover(!basicPopover);

<Btn id="Popover-1" color="primary" className="example-popover mr-1" title="Popover title" onClick={basicToggle}>Click to toggle popover</Btn>
<Popovers className="example-popover" title="Popover title" isOpen={basicPopover}  trigger="click">
  If the package restore doesn't help, you can look at the Output window in the Visual Studio.
<Popovers/>

import { Btn, ToolTip } from '../../../../AbstractElements';

const [basictooltip, setbasictooltip] = useState(false);
const toggle = () => setbasictooltip(!basictooltip);

<Btn color="primary" className="example-popover mb-0 me-0" id="TooltipExample" title=" Surprise!!! Thank you for hovering..." </Btn>
<ToolTip isOpen={open} target="TooltipExample" toggle={toggle}> {SurpriseText} </ToolTip>

import { ButtonGroup, Card, CardBody, Col, Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';

const [open, setOpen] = useState(false);
const toggle = () => setOpen(!open);

<ButtonGroup">
  <Dropdown isOpen={open} toggle={toggle}>
    <DropdownToggle caret color="primary"/>
    <DropdownMenu className="dropdown-block">
      <DropdownItem >Action</DropdownItem>
      <DropdownItem >Another Action</DropdownItem>
      <DropdownItem >Something Else Here</DropdownItem>
    </DropdownMenu>
  </div>
</div>

import { Nav, NavItem, NavLink, TabContent, TabPane } from "reactstrap";
import { useState } from "react";

const [basicTab, setBasicTab] = useState("1");
                  
<Nav tabs>
  <NavItem>
    <NavLink className={`txt-primary ${basicTab === "1" ? "active" : ""}`} onClick={() => setBasicTab("1")}>Home</NavLink>
  </NavItem>
  <NavItem>
    <NavLink className={`txt-primary ${basicTab === "2" ? "active" : ""}`} onClick={() => setBasicTab("2")}>Profile</NavLink>
  </NavItem>
  <NavItem>
    <NavLink className={`txt-primary ${basicTab === "3" ? "active" : ""}`} onClick={() => setBasicTab("3")}>Contact</NavLink>
  </NavItem>
</Nav>
<TabContent activeTab={basicTab}>
  <TabPane tabId="1">
    <P>Home</P>
  <TabPane/>
  <TabPane tabId="2">
    <P>Profile</P>
  <TabPane/>
  <TabPane tabId="3">
    <P>Contact</P>
  <TabPane/>
</TabContent>

import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from "reactstrap";

const [open, setOpen] = useState("1");
const toggle = (id) => (open === id ? setOpen() : setOpen(id));

<Accordion open={open} toggle={toggle} class="default-accordion">
  <AccordionItem>
    <AccordionHeader targetId="1" className="bg-light-primary txt-primary">
      <span className="text-primary">Accordian Item-1
        <ChevronDown className="svg-color text-primary"/>       
      </span>      
    </AccordionHeader>
    <AccordionBody accordionId="1">
      <P>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</P>      
    </AccordionBody>
  </AccordionItem>
  <AccordionItem>
  <AccordionHeader>
    <span className="text-primary">Accordian Item-2
      <ChevronDown className="svg-color text-primary"/>       
    </span>      
  </AccordionHeader>
  <AccordionBody accordionId="2">
    <P>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</P>      
  </AccordionBody>
 </AccordionItem>
  <AccordionItem>
  <AccordionHeader>
    <span className="text-primary">Accordian Item-3
      <ChevronDown className="svg-color text-primary"/>       
    </span>      
  </AccordionHeader>
  <AccordionBody accordionId="3">
    <P>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</P>      
  </AccordionBody>
 </AccordionItem>
</Accordion>