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: 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>

import { Button } from "reactstrap";
import CommonCardHeader from "@/CommonComponent/CommonCardHeader";
import { SimpleHorizontalDividerTitle } from "@/Constant";
import { SimpleHorizontalDividerData, SimpleHorizontalDividerSubTitle } from "@/Data/Uikits/divider";
import { Card, CardBody, Col } from "reactstrap";
 

const SimpleHorizontalDivider = () => {
  return (
    <Col md="6">
      <Card>
        <CommonCardHeader title={SimpleHorizontalDividerTitle} span={SimpleHorizontalDividerSubTitle} />
        <CardBody className="main-divider">
          {SimpleHorizontalDividerData.map((item, index) => (
            <div className={`divider-h-line bg-${item}`} key={index}/>
          ))}
        </CardBody>
      </Card>
    </Col>
  );
};

export default SimpleHorizontalDivider;

import CommonCardHeader from "@/CommonComponent/CommonCardHeader";
import { Href, ImagePath, PlaceholderCardsTitle } from "@/Constant";
import { PlaceholderCardsSubTitle } from "@/Data/Uikits/placeholder/Placeholders";
import Image from "next/image";
import { Button, Card, CardBody, Col, Row } from "reactstrap";
 

const PlaceholderCards = () => {
  return (
     <Col xxl="6" className="box-col-12">
       <Card>
         <CommonCardHeader title={PlaceholderCardsTitle} span={PlaceholderCardsSubTitle} />
         <CardBody className="loading-card-wrapper">
           <Row className="gy-3">
             <Col sm="6">
               <Card className="mb-0 overflow-hidden">
                 <Image height={524} width={818} className="card-img-top img-fluid" src={`${ImagePath}/masonry/5.jpg`} alt="" />
                  <CardBody>
                    <h5 className="card-title">Card title </h5>
                    <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card`s content. </p>
                    <Button color="primary" tag={"a"} href={Href}>Go somewhere </Button>
                  </CardBody>
               </Card>
             </Col>
             <Col sm="6">
               <Card className="mb-0 overflow-hidden" aria-hidden="true">
                 <Image height={524} width={818} className="card-img-top img-fluid" src={`${ImagePath}/masonry/13.jpg`} alt="" />
                 <CardBody>
                    <h5 className="card-title placeholder-glow">
                      <Col xs="4" className="placeholder placeholder-light" />
                    </h5>
                    <div className="card-text placeholder-glow mb-3">
                      <Col xs="7" className="placeholder placeholder-light" />
                      <Col xs="4" className="placeholder placeholder-light ms-1" />
                      <Col xs="4" className="placeholder placeholder-light" />
                      <Col xs="6" className="placeholder placeholder-light ms-1" />
                      <Col xs="3" className="placeholder placeholder-light" />
                    </div>
                    <Col xs="6">
                      <Button color="primary" tag={"a"} href={Href} className="disabled placeholder w-100" />
                    </Col>
                 </CardBody>
               </Card>
             </Col>
           </Row>
         </CardBody>
       </Card>
     </Col>
  );
};

export default PlaceholderCards;
                

import CommonCardHeader from "@/CommonComponent/CommonCardHeader";
import { OffcanvasDirectionsTitle } from "@/Constant";
import { OffcanvasDirectionsSubTitle } from "@/Data/Uikits/offcanvas/Offcanvas";
import TopOffcanvas from "./TopBottomOffcanvas";
import { Card, CardBody, Col } from "reactstrap";
import LeftRightOffcanvas from "./LeftRightOffcanvas";

const OffcanvasDirections = () => {
  return (
     <Col xs='12'>
       <Card>
         <CommonCardHeader title={OffcanvasDirectionsTitle} span={OffcanvasDirectionsSubTitle} />
         <CardBody className='common-flex common-offcanvas'>
           <TopOffcanvas title={"Top Offcanvas"} direction={"top"} color='primary' />
           <LeftRightOffcanvas title={"Right Offcanvas"} direction={"end"} color='secondary' />
           <TopOffcanvas title={"Bottom Offcanvas"} direction={"bottom"} color="warning" />
           <LeftRightOffcanvas title={"Left Offcanvas"} direction={"start"} color='success' />
         </CardBody>
       </Card>
     </Col>
  );
};

export default OffcanvasDirections;

import CommonCardHeader from "@/CommonComponent/CommonCardHeader";
import { Href, LinkUtilitiesTitle } from "@/Constant";
import { LinkUtilitiesData, LinkUtilitiesSubTitle } from "@/Data/Uikits/navigatelink/NavigateLinks";
import Link from "next/link";
import { Card, CardBody, Col } from "reactstrap";
 
const LinkUtilities = () => {
  return (
    <Col xxl="3" sm="6">
      <Card className="height-equal">
        <CommonCardHeader title={LinkUtilitiesTitle} span={LinkUtilitiesSubTitle} />
        <CardBody>
          {LinkUtilitiesData.map((item, index) => (
            <p key={index}>
              <Link className={`link-${item} link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#!`} href={Href}>
                Link {item}
              </Link>
            </p>
          ))}
        </CardBody>
      </Card>
    </Col>
  );
};
                  
export default LinkUtilities;