Theme Components

import { Collapse } from 'react-bootstrap

const Component = () => {
    const [collapse, setCollapse] = React.useState({1: true})

    const toggleCollapse = (e,tab) => {
        e.preventDefault()
        setCollapse({...collapse,[tab]: !collapse[tab]})
    }
    return (
      <div role="tablist">
        <div className="block mb-3">
          <div className="block-header" onClick={(e) => toggleCollapse(e, 1)}>
            <strong>
              <a
                href="#"
                className="accordion-link"
                aria-expanded={collapse[1]}
              >
                Option 1
              </a>
            </strong>
          </div>

          <Collapse in={collapse[1]}>
            <div>
              <div className="p-3">
                <p className="text-muted mb-0">
                  The bedding was hardly able to cover it and seemed ready to
                  slide off any moment. His many legs, pitifully thin compared
                  with the size of the rest of him, waved about helplessly as
                  he looked. &quot;What's happened to me?&quot; he thought. It
                  wasn't a dream.
                </p>
              </div>
            </div>
          </Collapse>
        </div>
        <div className="block mb-3">
          <div className="block-header" onClick={(e) => toggleCollapse(e, 2)}>
            <strong>
              <a
                href="#"
                className="accordion-link"
                aria-expanded={collapse[2]}
              >
                Option 2
              </a>
            </strong>
          </div>
          <Collapse in={collapse[2]}>
            <div>
              <div className="block-body py-5 d-flex align-items-center">
                <input type="radio" name="shippping" id="payment-method-1" />
                <label className="ms-3" for="payment-method-1">
                  <strong className="d-block text-uppercase mb-2">
                    {" "}
                    Pay with PayPal
                  </strong>
                  <span className="text-muted text-sm">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.{" "}
                  </span>
                </label>
              </div>
            </div>
          </Collapse>
        </div>
        <div className="block mb-3">
          <div className="block-header" onClick={(e) => toggleCollapse(e, 3)}>
            <strong>
              <a
                href="#"
                className="accordion-link"
                aria-expanded={collapse[3]}
              >
                Option 3
              </a>
            </strong>
          </div>
          <Collapse in={collapse[3]}>
            <div>
              <div className="block-body py-5 d-flex align-items-center">
                <input type="radio" name="shippping" id="payment-method-1" />
                <label className="ms-3" for="payment-method-1">
                  <strong className="d-block text-uppercase mb-2">
                    {" "}
                    Pay on delivery
                  </strong>
                  <span className="text-muted text-sm">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.{" "}
                  </span>
                </label>
              </div>
            </div>
          </Collapse>
        </div>
      </div>
    )
}

export default Component

import { Form, Row, Col } from "react-bootstrap";

const Component = () => {
  <div className="block">
    <div className="block-header" role="tab">
      <h6 className="text-uppercase mb-0">Block header</h6>
    </div>
    <div className="block-body">
      <Form action="#">
        <Row>
          <Col md="6" className="mb-4">
            <Form.Label htmlFor="card-name">Name on Card</Form.Label>
            <Form.Control
              className="form-control"
              type="text"
              name="card-name"
              placeholder="Name on card"
              id="card-name"
            />
          </Col>
          <Col md="6" className="mb-4">
            <Form.Label htmlFor="card-number">Card Number</Form.Label>
            <Form.Control
              className="form-control"
              type="text"
              name="card-number"
              placeholder="Card number"
              id="card-number"
            />
          </Col>
        </Row>
      </Form>
    </div>
  </div>
}

export default Component

import Breadcrumbs from './components/Breadcrumbs'

    const Component = () => {
    return (
        <Breadcrumbs
            links={[
              {
                name: "Home",
                link: "/",
              },
              {
                name: "Documentation",
                link: "/docs/introduction",
              },
              {
                name: "Next.js",
                active: true,
              },
            ]}
            className="justify-content-center"
        />
    )
}

export default Component

import Cart from "./Cart";

const Component = () => {
    return(
        <Cart />
    )
}

export default Component

import CategoryTopBar from '/CategoryTopBar'

const Component = () => {
    return (
        <CategoryTopBar />
    )
}

export default Component

import CustomerSidebar from "./CustomerSidebar";

const Component = () => {
    return(
        <CustomerSidebar lg="5" xl="4"/>
    )
}

export default Component

Usage of <CustomImage /> component:

You can use the same props as the next/image component has.

import Image from './components/CustomImage'

export default () => {
  return (
    <Image
      src="/some/src.jpg"
      alt="..."
      width={1080}
      height={720}
      layout="intrinsic"
      className="img-fluid card-img-top"
  />
  )
}

To setup your project for static export, following configuration is needed.

{
  images: {
    deviceSizes: [320, 480, 640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    // loader: "imgix", // Uncoment this line
    // path: "", // Uncoment this line
  },
  env: {
    production_type: "server", // Change variable to "static"
  },
  // trailingSlash: true, // Uncoment this line
},

import Product from "./Product";
import { Row, Col } from "react-bootstrap";

const Component = () => {
    return(
      <Row>
        {products.map((value, index) => (
          <Col sm="6" lg="4" xl="4" key={index}>
            <Product data={value} showQuickView />
          </Col>
        ))}
      </Row>
    )
}

export default Component

import ModalQuickView from '../../ModalQuickView'

const Component = () => {
    const [quickView, setQuickView] = React.useState(false)
    return (
        <div>
            <button onClick={() => setQuickView(!quickView)}>Toggle product modal</button>
            <ModalQuickView isOpen={quickView} toggle={() => setQuickView()} product={product}/>
        </div>
    )
}

export default Component

Brands Swiper

import { Swiper,  SwiperSlide } from 'swiper/react'
import { Pagination } from "swiper"
import brandsLogos from '/brands-logos.json'

const Component = () => {

    const params = {
        className: 'brands-slider pb-5',
        modules: [Pagination],
        slidesPerView: 4,
        spaceBetween: 15,
        loop: true,
        roundLengths: true,
        breakpoints: {
            1200: {
                slidesPerView: 5
            }
        }
    }
    
    return (
        <Swiper {...params}>
            {brandsLogos.map((brand, index) =>
                <SwiperSlide key={index} className="h-auto d-flex align-items-center justify-content-center">
                    <img
                        src={brand.img}
                        alt={brand.title}
                        className="img-fluid w-6rem opacity-7"
                    />
                </SwiperSlide>
            )}
        </Swiper>
    )
}

export default Component

import Magnifier from "react-magnifier"

const Component = () => {
    return (
        <Magnifier 
            mgShowOverflow={false} 
            mgWidth={2000} 
            mgHeight={2000} 
            className="img-fluid" 
            src="/image/src" 
            alt="image 
            description" 
            zoomFactor={.11} 
            style={{ cursor: 'pointer' }} 
        />
    )
}

export default Component