first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,23 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
const BreadCrumb = ({data}) => {
|
||||
return (
|
||||
<nav className="breadcrumb-style-one mt-20">
|
||||
<ol className="breadcrumb bg-white style-none m0 p0">
|
||||
<li className="breadcrumb-item">
|
||||
<Link href="/">Home</Link>
|
||||
</li>
|
||||
<li className="breadcrumb-item">
|
||||
<Link href="/e-commerce">Shop</Link>
|
||||
</li>
|
||||
<li className="breadcrumb-item active" aria-current="page">
|
||||
{data ? data.title:'Quilted Gilet With Hood'}
|
||||
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default BreadCrumb;
|
||||
@@ -0,0 +1,47 @@
|
||||
import React from "react";
|
||||
|
||||
const Colors = () => {
|
||||
return (
|
||||
<ul className="style-none d-flex align-items-center color-custome-input">
|
||||
<li>
|
||||
<input
|
||||
type="radio"
|
||||
name="color"
|
||||
defaultValue="color01"
|
||||
className="color-check-btn"
|
||||
defaultChecked="checked"
|
||||
/>
|
||||
<label style={{ background: "#9CD2FF" }}></label>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
type="radio"
|
||||
name="color"
|
||||
defaultValue="color02"
|
||||
className="color-check-btn"
|
||||
/>
|
||||
<label style={{ background: "#FF9153" }}></label>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
type="radio"
|
||||
name="color"
|
||||
defaultValue="color03"
|
||||
className="color-check-btn"
|
||||
/>
|
||||
<label style={{ background: "#5FF2BE" }}></label>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
type="radio"
|
||||
name="color"
|
||||
defaultValue="color04"
|
||||
className="color-check-btn"
|
||||
/>
|
||||
<label style={{ background: "#9A82FF" }}></label>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
export default Colors;
|
||||
@@ -0,0 +1,67 @@
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
const ProductFratureBlock = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="col-lg-3 col-sm-6" data-aos="fade-up">
|
||||
<div className="block-style-thirtyNine mt-40 text-center">
|
||||
<div className="icon rounded-circle d-flex align-items-center justify-content-center m-auto">
|
||||
<Image width="26" height="26" src="/images/icon/203.svg" alt="image" />
|
||||
</div>
|
||||
<h3>Free Shipping</h3>
|
||||
<p className="ps-xl-3 pe-xl-3">
|
||||
Simplify the process to create proposals.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- /.block-style-thirtyNine --> */}
|
||||
</div>
|
||||
<div
|
||||
className="col-lg-3 col-sm-6"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay="100"
|
||||
>
|
||||
<div className="block-style-thirtyNine mt-40 text-center">
|
||||
<div className="icon rounded-circle d-flex align-items-center justify-content-center m-auto">
|
||||
<Image width="30" height="31" src="/images/icon/204.svg" alt="image" />
|
||||
</div>
|
||||
<h3>Free Return</h3>
|
||||
<p className="ps-xl-3 pe-xl-3">Return money within 7 days only!</p>
|
||||
</div>
|
||||
{/* <!-- /.block-style-thirtyNine --> */}
|
||||
</div>
|
||||
<div
|
||||
className="col-lg-3 col-sm-6"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay="200"
|
||||
>
|
||||
<div className="block-style-thirtyNine mt-40 text-center">
|
||||
<div className="icon rounded-circle d-flex align-items-center justify-content-center m-auto">
|
||||
<Image width="26" height="26" src="/images/icon/205.svg" alt="image" />
|
||||
</div>
|
||||
<h3>Secured Payment</h3>
|
||||
<p className="ps-xl-3 pe-xl-3">We ensure secure payment with PEV</p>
|
||||
</div>
|
||||
{/* <!-- /.block-style-thirtyNine --> */}
|
||||
</div>
|
||||
<div
|
||||
className="col-lg-3 col-sm-6"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay="300"
|
||||
>
|
||||
<div className="block-style-thirtyNine mt-40 text-center">
|
||||
<div className="icon rounded-circle d-flex align-items-center justify-content-center m-auto">
|
||||
<Image width="34" height="34" src="/images/icon/206.svg" alt="image" />
|
||||
</div>
|
||||
<h3>100% Safe</h3>
|
||||
<p className="ps-xl-3 pe-xl-3">
|
||||
We provide world best security system
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- /.block-style-thirtyNine --> */}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductFratureBlock;
|
||||
@@ -0,0 +1,135 @@
|
||||
'use client'
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
|
||||
import ProductGalleryContent from "./ProductGalleryContent";
|
||||
import { Gallery, Item } from "react-photoswipe-gallery";
|
||||
|
||||
const ProductGallery = ({data}) => {
|
||||
return (
|
||||
<Gallery>
|
||||
<Tabs>
|
||||
<div className="row">
|
||||
<div className="col-lg-5 order-lg-2">
|
||||
<div className=" product-img-tab-content h-100 " style={{display:'flex',alignItems:'center',justifyContent:'center'}} >
|
||||
<TabPanel>
|
||||
<div className="h-100">
|
||||
<Item
|
||||
original= {`/images/shop/${data.img}.png`}
|
||||
thumbnail= {`/images/shop/${data.img}.png`}
|
||||
width={465}
|
||||
height={609}
|
||||
>
|
||||
{({ ref, open }) => (
|
||||
<div className="fancybox h-100 w-100 d-flex align-items-center justify-content-center">
|
||||
<Image width={465} height={610} style={{height:'fit-content'}}
|
||||
src= {`/images/shop/${data.img}.png`}
|
||||
alt="Gallery"
|
||||
className="m-auto"
|
||||
role="button"
|
||||
ref={ref}
|
||||
onClick={open}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Item>
|
||||
</div>
|
||||
</TabPanel>
|
||||
{/* End tabpanel */}
|
||||
|
||||
<TabPanel>
|
||||
<div className="h-100">
|
||||
<Item
|
||||
original="/images/shop/img_21.png"
|
||||
thumbnail="/images/shop/img_21.png"
|
||||
width={533}
|
||||
height={611}
|
||||
>
|
||||
{({ ref, open }) => (
|
||||
<div className="fancybox h-100 w-100 d-flex align-items-center justify-content-center">
|
||||
<Image width={465} height={610} style={{height:'fit-content'}}
|
||||
src="/images/shop/img_21.png"
|
||||
alt="Gallery"
|
||||
className="m-auto"
|
||||
role="button"
|
||||
ref={ref}
|
||||
onClick={open}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Item>
|
||||
</div>
|
||||
</TabPanel>
|
||||
{/* End tabpanel */}
|
||||
|
||||
<TabPanel>
|
||||
<div className="h-100">
|
||||
<Item
|
||||
original="/images/shop/img_22.png"
|
||||
thumbnail="/images/shop/img_22.png"
|
||||
width={395}
|
||||
height={588}
|
||||
>
|
||||
{({ ref, open }) => (
|
||||
<div className="fancybox h-100 w-100 d-flex align-items-center justify-content-center">
|
||||
<Image width={465} height={610} style={{height:'fit-content'}}
|
||||
src="/images/shop/img_22.png"
|
||||
alt="Gallery"
|
||||
className="m-auto"
|
||||
role="button"
|
||||
ref={ref}
|
||||
onClick={open}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Item>
|
||||
</div>
|
||||
</TabPanel>
|
||||
</div>
|
||||
</div>
|
||||
{/* End larget gallery */}
|
||||
|
||||
<div className="col-lg-1 order-lg-1">
|
||||
<TabList className="nav nav-tabs flex-lg-column product-img-tab">
|
||||
<Tab className="nav-item">
|
||||
<button className="nav-link">
|
||||
<Image width={465} height={610} style={{height:'fit-content'}}
|
||||
src= {`/images/shop/${data.img}.png`}
|
||||
alt="shop "
|
||||
className="m-auto"
|
||||
/>
|
||||
</button>
|
||||
</Tab>
|
||||
<Tab className="nav-item">
|
||||
<button className="nav-link">
|
||||
<Image width={465} height={610} style={{height:'fit-content'}}
|
||||
src="/images/shop/img_18.png"
|
||||
alt="shop "
|
||||
className="m-auto"
|
||||
/>
|
||||
</button>
|
||||
</Tab>
|
||||
<Tab className="nav-item">
|
||||
<button className="nav-link">
|
||||
<Image width={465} height={610} style={{height:'fit-content'}}
|
||||
src="/images/shop/img_19.png"
|
||||
alt="shop "
|
||||
className="m-auto"
|
||||
/>
|
||||
</button>
|
||||
</Tab>
|
||||
</TabList>
|
||||
</div>
|
||||
{/* End thumb gallery */}
|
||||
|
||||
<div className="col-lg-6 order-lg-3">
|
||||
<ProductGalleryContent data={data} />
|
||||
</div>
|
||||
{/* End product gallery content */}
|
||||
</div>
|
||||
</Tabs>
|
||||
</Gallery>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductGallery;
|
||||
@@ -0,0 +1,93 @@
|
||||
|
||||
'use client'
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import Colors from "./Colors";
|
||||
import Quantity from "./Quantity";
|
||||
import Size from "./Size";
|
||||
import { useContextElement } from "@/context/Context";
|
||||
const ProductGalleryContent = ({data}) => {
|
||||
const {addProductToCart,
|
||||
isAddedToCartProducts,} = useContextElement()
|
||||
return (
|
||||
<div className="product-info ps-xl-5 md-mt-50">
|
||||
<div className="stock-tag">In Stock</div>
|
||||
<h3 className="product-name">{data.title}</h3>
|
||||
<ul className="style-none d-flex align-items-center rating">
|
||||
<li>
|
||||
<i className="fa fa-star" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa fa-star" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa fa-star" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa fa-star" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa fa-star-o" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">(2 Customer Reviews)</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="price">${Math.round(data.price - 3).toFixed(2)} - ${Math.round(data.price + 3).toFixed(2)}</div>
|
||||
<p className="availability">38 Piece Available </p>
|
||||
<p className="description-text">
|
||||
Tote bag gochujang dreamcatcher fanny pack ban cold-pressed. Vape mlkshk
|
||||
sriracha marfa.{" "}
|
||||
</p>
|
||||
<ul className="product-feature style-none">
|
||||
<li>Free delivery available</li>
|
||||
<li>Use promo-code and save up to 25%</li>
|
||||
</ul>
|
||||
|
||||
<div className="customize-order">
|
||||
<div className="row">
|
||||
<div className="col-xl-11">
|
||||
<div className="row">
|
||||
<div className="col-lg-3 col-md-3 col-sm-4">
|
||||
<div className="quantity mt-25">
|
||||
<h6>Quantity</h6>
|
||||
<Quantity data={data} />
|
||||
</div>
|
||||
</div>
|
||||
{/* End Quantity */}
|
||||
|
||||
<div className="col-lg-3 col-md-3 col-sm-4">
|
||||
<div className="color-selection mt-25">
|
||||
<h6>Colors</h6>
|
||||
<Colors />
|
||||
</div>
|
||||
</div>
|
||||
{/* End colors */}
|
||||
|
||||
<div className="col-xl-5 col-md-6 col-sm-4">
|
||||
<div className="size-selection mt-25">
|
||||
<h6>Size</h6>
|
||||
<Size />
|
||||
</div>
|
||||
</div>
|
||||
{/* End Size */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- /.customize-order --> */}
|
||||
|
||||
<div className="button-group mt-30 d-sm-flex align-items-center">
|
||||
<span style={{cursor:'pointer'}} onClick={()=>addProductToCart(data.id)} className="cart-btn mt-15 me-sm-4 d-block">
|
||||
{isAddedToCartProducts(data.id) ? <Link style={{color:'inherit',padding:'0px',margin:'0px'}} href={'/cart'}>View Cart</Link>:'Add to Cart'}
|
||||
</span>
|
||||
<a href="#" className="wishlist-btn mt-15 d-block">
|
||||
Add To wishlist
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductGalleryContent;
|
||||
@@ -0,0 +1,151 @@
|
||||
'use client'
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
|
||||
|
||||
const ProductTabContent = () => {
|
||||
return (
|
||||
<div className="product-review-tab mt-150 lg-mt-100">
|
||||
<Tabs>
|
||||
<TabList className="nav nav-tabs">
|
||||
<Tab className="nav-item">
|
||||
<button className="nav-link">Description</button>
|
||||
</Tab>
|
||||
<Tab className="nav-item">
|
||||
<button className="nav-link ">Technical Info</button>
|
||||
</Tab>
|
||||
<Tab className="nav-item">
|
||||
<button className="nav-link "> Feedback</button>
|
||||
</Tab>
|
||||
</TabList>
|
||||
|
||||
<div className="tab-content mt-40 lg-mt-20">
|
||||
<TabPanel>
|
||||
<div className="row gx-5">
|
||||
<div className="col-xl-6">
|
||||
<h5>Specifications:</h5>
|
||||
<p>
|
||||
One touch of a red-hot stove is usually all we need to avoid
|
||||
that . The same is true as we experience in emotional
|
||||
sensation of stress from our first instances of social
|
||||
rejection ridicule.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
<h5>Check product main features:</h5>
|
||||
<ul className="style-none product-feature">
|
||||
<li>
|
||||
Lorem ipsum best lightweight bra cool rejection avoid text
|
||||
</li>
|
||||
<li>Lightweight bras cool rejection quickly quis.</li>
|
||||
<li>
|
||||
We quickly learn to fear and automatically avoid potentially
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<div className="row gx-5">
|
||||
<div className="col-xl-6">
|
||||
<h5>Check product main features:</h5>
|
||||
<ul className="style-none product-feature">
|
||||
<li>
|
||||
Lorem ipsum best lightweight bra cool rejection avoid text
|
||||
</li>
|
||||
<li>Lightweight bras cool rejection quickly quis.</li>
|
||||
<li>
|
||||
We quickly learn to fear and automatically avoid potentially
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
<h5>Specifications:</h5>
|
||||
<p>
|
||||
One touch of a red-hot stove is usually all we need to avoid
|
||||
that . The same is true as we experience in emotional
|
||||
sensation of stress from our first instances of social
|
||||
rejection ridicule.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<div className="user-comment-area">
|
||||
<div className="single-comment d-flex align-items-top">
|
||||
<Image width={60} height={60} style={{height:'fit-content'}}
|
||||
src="/images/shop/avatar_01.jpg"
|
||||
alt="image"
|
||||
className="user-img"
|
||||
/>
|
||||
<div className="user-comment-data">
|
||||
<h6 className="name">Rashed ka.</h6>
|
||||
<ul className="style-none d-flex rating">
|
||||
<li>
|
||||
<i className="fa fa-star" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa fa-star" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa fa-star" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa fa-star" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa fa-star-o" aria-hidden="true"></i>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
One touch of a red-hot stove is usually all we need to avoid
|
||||
that kind of discomfort in future. The same true we
|
||||
experience the emotional sensation.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- /.user-comment-data --> */}
|
||||
</div>
|
||||
{/* <!-- /.single-comment --> */}
|
||||
<div className="single-comment d-flex align-items-top">
|
||||
<Image width={60} height={60} style={{height:'fit-content'}}
|
||||
src="/images/shop/avatar_02.jpg"
|
||||
alt="image"
|
||||
className="user-img"
|
||||
/>
|
||||
<div className="user-comment-data">
|
||||
<h6 className="name">Zubayer hasan</h6>
|
||||
<ul className="style-none d-flex rating">
|
||||
<li>
|
||||
<i className="fa fa-star" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa fa-star" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa fa-star" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa fa-star" aria-hidden="true"></i>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa fa-star-o" aria-hidden="true"></i>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
One touch of a red-hot stove is usually all we need to avoid
|
||||
that kind of discomfort in future. The same true we
|
||||
experience the emotional sensation.
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- /.user-comment-data --> */}
|
||||
</div>
|
||||
{/* <!-- /.single-comment --> */}
|
||||
</div>
|
||||
</TabPanel>
|
||||
</div>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductTabContent;
|
||||
@@ -0,0 +1,88 @@
|
||||
|
||||
|
||||
'use client'
|
||||
|
||||
import { useContextElement } from "@/context/Context";
|
||||
import React from "react";
|
||||
|
||||
const Quantity = ({data}) => {
|
||||
|
||||
const { cartProducts, setCartProducts , isAddedToCartProducts } = useContextElement();
|
||||
|
||||
const handleIncrease = () => {
|
||||
const productQuantity = document.getElementById('productQuantity')
|
||||
productQuantity.value = Number(productQuantity.value) + 1
|
||||
if (isAddedToCartProducts(data.id) ) {
|
||||
|
||||
const cartItem = cartProducts.filter((elm)=>elm.id == data.id)[0]
|
||||
const itemIndex = cartProducts.indexOf(cartItem)
|
||||
const item = cartProducts[itemIndex];
|
||||
|
||||
item.quantity += 1;
|
||||
const updated = [...cartProducts];
|
||||
updated[itemIndex] = item;
|
||||
|
||||
|
||||
setCartProducts(updated);
|
||||
}
|
||||
};
|
||||
const handleQuantity = (e) => {
|
||||
if (isAddedToCartProducts(data.id)) {
|
||||
const cartItem = cartProducts.filter((elm)=>elm.id == data.id)[0]
|
||||
const itemIndex = cartProducts.indexOf(cartItem)
|
||||
const item = cartProducts[itemIndex];
|
||||
item.quantity = Number(e.target.value);
|
||||
const updated = [...cartProducts];
|
||||
updated[itemIndex] = item;
|
||||
|
||||
setCartProducts(updated);
|
||||
}
|
||||
}
|
||||
const handleDecrease = () => {
|
||||
const productQuantity = document.getElementById('productQuantity')
|
||||
productQuantity.value = Number(productQuantity.value) - 1
|
||||
if (isAddedToCartProducts(data.id)) {
|
||||
|
||||
const cartItem = cartProducts.filter((elm)=>elm.id == data.id)[0]
|
||||
|
||||
|
||||
const itemIndex = cartProducts.indexOf(cartItem)
|
||||
const item = cartProducts[itemIndex];
|
||||
|
||||
if (item.quantity > 1) {
|
||||
item.quantity -= 1;
|
||||
const updated = [...cartProducts];
|
||||
updated[itemIndex] = item;
|
||||
|
||||
|
||||
setCartProducts(updated);
|
||||
} }
|
||||
};
|
||||
return (
|
||||
<div className="button-group">
|
||||
<ul className="style-none d-flex align-items-center">
|
||||
<li>
|
||||
<button onClick={()=>handleDecrease()} className="value-decrease">-</button>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
|
||||
defaultValue={cartProducts.filter((elm)=>elm.id == data.id)[0] ? cartProducts.filter((elm)=>elm.id == data.id)[0].quantity : "1"}
|
||||
id="productQuantity"
|
||||
|
||||
|
||||
onChange={handleQuantity}
|
||||
className="product-value val"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<button onClick={()=>handleIncrease()} className="value-increase">+ </button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Quantity;
|
||||
@@ -0,0 +1,86 @@
|
||||
'use client'
|
||||
|
||||
|
||||
import React from "react";
|
||||
import Slider from "react-slick";
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { bestSellingItem } from "@/data/products";
|
||||
const RelatedProducts = () => {
|
||||
const settings = {
|
||||
dots: false,
|
||||
arrows: false,
|
||||
centerPadding: "0",
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 3000,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1200,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Slider {...settings}>
|
||||
{bestSellingItem.map((item) => (
|
||||
<div className="item" key={item.id}>
|
||||
<div className="product-block-two">
|
||||
<div className="img-holder">
|
||||
<Link
|
||||
href={`/products/${item.id}`}
|
||||
className="d-flex align-items-center justify-content-center h-100"
|
||||
>
|
||||
<Image width={465} height={609} style={{height:'fit-content'}}
|
||||
src={`/images/shop/${item.img}.png`}
|
||||
alt="shop"
|
||||
className="product-img tran4s"
|
||||
/>
|
||||
</Link>
|
||||
<Link href="/cart" className="cart-icon" title="Add To Cart">
|
||||
<i className="fa fa-shopping-cart" aria-hidden="true"></i>
|
||||
</Link>
|
||||
</div>
|
||||
{/* <!-- /.img-holder --> */}
|
||||
<div className="product-meta">
|
||||
<ul className="style-none d-flex justify-content-center rating">
|
||||
{item.ratings}
|
||||
</ul>
|
||||
<Link href={`/products/${item.id}`} className="product-title">
|
||||
{item.title}
|
||||
</Link>
|
||||
|
||||
<div className="price">${item.price}</div>
|
||||
</div>
|
||||
{/* <!-- /.product-meta --> */}
|
||||
</div>
|
||||
{/* <!-- /.product-block-two --> */}
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default RelatedProducts;
|
||||
@@ -0,0 +1,46 @@
|
||||
import React from "react";
|
||||
|
||||
const Size = () => {
|
||||
return (
|
||||
<ul className="style-none d-flex align-items-center size-custome-input">
|
||||
<li>
|
||||
<input
|
||||
type="radio"
|
||||
name="size"
|
||||
defaultValue="small"
|
||||
className="size-check-btn"
|
||||
/>
|
||||
<label>S</label>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
type="radio"
|
||||
name="size"
|
||||
defaultValue="medium"
|
||||
className="size-check-btn"
|
||||
/>
|
||||
<label>M</label>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
type="radio"
|
||||
name="size"
|
||||
defaultValue="large"
|
||||
className="size-check-btn"
|
||||
/>
|
||||
<label>L</label>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
type="radio"
|
||||
name="size"
|
||||
defaultValue="extra large"
|
||||
className="size-check-btn"
|
||||
/>
|
||||
<label>XL</label>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
export default Size;
|
||||
@@ -0,0 +1,42 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from "react";
|
||||
|
||||
const SocialShare = () => {
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
|
||||
return (
|
||||
<div className="share-dropdown mt-20 position-relative">
|
||||
<button
|
||||
className="btn dropdown-toggle"
|
||||
type="button"
|
||||
onClick={handleClick}
|
||||
>
|
||||
Share
|
||||
</button>
|
||||
|
||||
<div className={click ? "dropdown-menu show" : "dropdown-menu"}>
|
||||
<ul className="d-flex justify-content-between social-icon style-none">
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fa fa-facebook"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fa fa-instagram"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i className="fa fa-pinterest"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SocialShare;
|
||||
Reference in New Issue
Block a user