import { Button } from "reactstrap";

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

import { Badge } from "reactstrap";

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

import { Progressbar } from 'reactstrap'

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

import { Alert } from 'reactstrap'

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

import { Button, Popover } from 'reactstrap'

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

<Button id="Popover-1" color="primary" className="example-popover mr-1" title="Popover title" tigger="click" onClick={basicToggle}>Click to toggle popover</Button>
<Popovers className="example-popover btn btn-secondary" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">And here's some amazing content. It's very engaging. Right?</>

import { Button, ToolTip } from 'reactstrap'

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

<Button color="primary" className="example-popover mb-0 me-0" id="TooltipExample" title=" Surprise!!! Thank you for hovering..." </Button>
<ToolTip isOpen={open} target="TooltipExample" toggle={toggle}> {SurpriseText} </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) => (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>