import { Btn } from "./AbstractElements";

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

import { Badges } from "./AbstractElements";

<Badges class="primary">Primary</Badges>
<Badges class="secondary">Secondary</Badges>
<Badges class="success">Success</Badges>
<Badges class="info">Info</Badges>
<Badges class="warning text-dark">Warning</Badges>
<Badges class="danger">Danger</Badges>
<Badges class="light text-dark">Light</Badges>
<Badges class="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!</Alert>
<Alerts color="secondary">This is a secondary alert—check it out!</Alert>
<Alerts color="success">This is a success alert—check it out!</Alert>
<Alerts color="info">This is a info alert—check it out!</Alert>
<Alerts color="warning">This is a warning alert—check it out!</Alert>
<Alerts color="danger">This is a danger alert—check it out!</Alert>
<Alerts color="light">This is a light alert—check it out!</Alert>
<Alerts color="dark">This is a dark alert—check it out!</Alert>
                    

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" tigger="click" onClick={basicToggle}>Click to toggle popover</Btn>
<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 { 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>
  </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 { Modal, ModalBody } from 'reactstrap';
import { Btn } from './AbstractElements';

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

<Btn color="secondary" onClick={toggle} className='px-xl-2 px-xxl-3'>{Simple}</Btn>
<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>
      <Btn color="primary" className="d-flex align-items-center gap-2 text-light ms-auto" onClick={toggle}>{ExploreMore}
      <SvgIcon iconId='arrow-right' className='feather' />
      </Btn>
    </div>
  </ModalBody>
</Modal>