import { Btn } from "./AbstractElements";

<Btn color="primary">Primary Button</Btn>
<Btn color="secondary">Secondary Button</Btn>
<Btn color="success">Success Button</Btn>
<Btn color="info">Info Button</Btn>
<Btn color="warning">Warning Button</Btn>
<Btn color="danger">Danger Button</Btn>
<Btn color="light">Light Button</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 tag-pills-sm-mb">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 [popover, setPopover] = useState(false);
const toggle = () => setPopover(!popover);

<Btn color="danger" className="example-popover mb-0 me-0" id="Popover-1">{"Popover on right"}</Btn>
<Popovers placement="bottom" isOpen={popover} target="Popover-1" toggle={toggle} trigger="hover" title=Hover Popover>
  {item.popoverBody}
</Popovers>

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

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

<Btn color="primary" className="example-popover" id="Tooltip-1">Hover Me</Btn>
<ToolTip target="Tooltip-1" placement="top" isOpen={basictooltip} toggle={toggle}>tooltip</ToolTip>

import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from "reactstrap";

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

<div className="dropdown-basic">
  <Dropdown isOpen={open} toggle={toggle}>
    <DropdownToggle caret color="primary"/>
    <DropdownMenu className="dropdown-content">
      <DropdownItem href="#javascript">Action</DropdownItem>
      <DropdownItem href="#javascript">Another Action</DropdownItem>
      <DropdownItem href="#javascript">Something Else Here</DropdownItem>
    </DropdownMenu>
  </div>
</div>

import { Nav, NavItem, NavLink, TabContent, TabPane } from "reactstrap";
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: string) => (open === id ? setOpen('') : setOpen(id));

<Accordion open={open} toggle={toggle} class="default-according">
  <AccordionItem>
    <AccordionHeader>
      <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>