import { Button } from "reactstrap";

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

import { Badge } from "reactstrap";

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

import { Progress } from 'reactstrap'

<Progress value={0}/>
<Progress color="primary" value={25}/>
<Progress color="secondary" value={50}/>
<Progress color="success" value={75}/>
<Progress 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 { useState } from "react";
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" onClick={basicToggle}>Hurry Up!</Button>
<Popover className="example-popover btn btn-secondary" isopen={basicPopover} placement="top" target="Popover-1" trigger="click" >
  <PopoverHeader>Basic Popover</PopoverHeader>
  <PopoverBody>If the package restore doesn't help, you can look at the Output window in the Visual Studio.</PopoverBody>
</Popover>

import { useState } from "react";
import { Button, Tooltip } from 'reactstrap'

const [basictooltip, setbasictooltip] = useState(false);
const toggle = () => setbasictooltip(!basictooltip);
                    
<Button color="primary" className="example-popover" id="Tooltip-1">Hover Me</Button>
<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>
  </Dropdown>
</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 { Button, Modal, ModalBody } from 'reactstrap';

const [simpleModal, setSimpleModal] = useState(false);
const toggle = () => setSimpleModal(!simpleModal);

<Button color="secondary" onClick={toggle} className='px-xl-2 px-xxl-3'>{Simple}</Button>
<Modal isOpen={simpleModal} toggle={toggle}>
  <ModalBody>
  <div className="modal-toggle-wrapper">
    <h4>Up to <strong className="font-danger">85% OFF</strong>, Hurry Up Online Shopping</h4>
      <div className="modal-img">
      <Image width={200} height={200} src={`${ImagePath}/gif/online-shopping.gif`} alt="online-shopping" />
      </div>
      <p className="text-sm-center">Our difficulty in finding regular clothes that was of great quality, comfortable, and didn't impact the environment given way to Creatures of Habit.</p>
      <Button color="primary" className="d-flex align-items-center gap-2 text-light ms-auto" onClick={toggle}>{ExploreMore}
      <SvgIcon iconId='arrow-right' className='feather' />
      </Button>
    </div>
  </ModalBody>
</Modal>