first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,86 @@
|
||||
'use client'
|
||||
import Image from "next/image";
|
||||
|
||||
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 { bestSellingItem } from "@/data/products";
|
||||
|
||||
const BestSelling = () => {
|
||||
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={372} height={356} style={{objectFit:'contain'}}
|
||||
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 BestSelling;
|
||||
@@ -0,0 +1,50 @@
|
||||
'use client'
|
||||
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
const CallToAction = () => {
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row align-items-end">
|
||||
<div className="col-lg-6" data-aos="fade-right">
|
||||
<div className="title-style-eleven">
|
||||
<h2 className="pe-xl-5 me-xl-2">Signup & get 20% flat dicount</h2>
|
||||
<p className="pt-25 text-dark">
|
||||
Receive offers, product alerts, styling inspiration and more. By
|
||||
signing up, you agree to our Privacy Policy.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* End .col */}
|
||||
|
||||
<div className="col-lg-6" data-aos="fade-left">
|
||||
<div className="form-wrapper">
|
||||
<form onClick={handleSubmit}>
|
||||
<input type="email" placeholder="ihidago@ujufidnan.gov" />
|
||||
<button className="tran3s">
|
||||
<Image width={21} height={10} src="/images/icon/53.svg" alt="image" className="m-auto" />
|
||||
</button>
|
||||
</form>
|
||||
<p className="mt-15">
|
||||
Already a member?{" "}
|
||||
<Link href="/login" className="text-dark">
|
||||
Sign in.
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
{/* <!-- /.form-wrapper --> */}
|
||||
</div>
|
||||
{/* End .col */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CallToAction;
|
||||
@@ -0,0 +1,62 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { useContextElement } from "@/context/Context";
|
||||
const CartDropdown = () => {
|
||||
const {cartProducts,totalPrice} = useContextElement()
|
||||
return (
|
||||
<>
|
||||
{cartProducts.length ?
|
||||
<ul className="style-none cart-product-list" style={{maxHeight:'400px',overflow:'scroll'}}>
|
||||
|
||||
{cartProducts.map((item,i)=>
|
||||
<li className="d-flex align-items-center selected-item">
|
||||
<Link
|
||||
href={`/products/${item.id}`}
|
||||
className="item-img d-flex align-items-center justify-content-center"
|
||||
>
|
||||
<Image width={465} height={609} style={{height:'fit-content'}} src={`/images/shop/${item.img}.png`} alt="cart" />
|
||||
</Link>
|
||||
<div className="item-info">
|
||||
<Link href={`/products/${item.id}`} className="name">
|
||||
{item.name}
|
||||
</Link>
|
||||
<div className="price">
|
||||
${item.price.toFixed(2)} <span className="quantity">x {item.quantity}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- /.item-info --> */}
|
||||
</li>)}
|
||||
{/* <!-- /.selected-item --> */}
|
||||
|
||||
|
||||
{/* <!-- /.selected-item --> */}
|
||||
</ul> : <div style={{fontSize:'18px',margin:'15px auto'}} >Cart is empty</div>}
|
||||
{/* <!-- /.cart-product-list --> */}
|
||||
|
||||
<div className="subtotal d-flex justify-content-between align-items-center">
|
||||
<div className="title">Subtotal</div>
|
||||
<div className="total-price">${totalPrice.toFixed(2)}</div>
|
||||
</div>
|
||||
<ul className="style-none button-group">
|
||||
{cartProducts.length ? <>
|
||||
<li>
|
||||
<Link href="/cart" className="view-cart">
|
||||
View Cart
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/checkout" className="checkout">
|
||||
Checkout
|
||||
</Link>
|
||||
</li></> : <li>
|
||||
<Link href="/e-commerce" className="view-cart">
|
||||
Continue Shoping
|
||||
</Link>
|
||||
</li> }
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CartDropdown;
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from "react";
|
||||
|
||||
const Categorie = () => {
|
||||
const categorieContent = [
|
||||
{
|
||||
id: 1,
|
||||
bgImage: "url(/images/shop/img_04.png)",
|
||||
title: "Kids",
|
||||
delayAnimation: "0",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
bgImage: "url(/images/shop/img_05.png)",
|
||||
title: "Woman",
|
||||
delayAnimation: "100",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
bgImage: "url(/images/shop/img_06.png)",
|
||||
title: "Man",
|
||||
delayAnimation: "200",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
bgImage: "url(/images/shop/img_07.png)",
|
||||
title: "Others",
|
||||
delayAnimation: "300",
|
||||
},
|
||||
];
|
||||
return (
|
||||
<>
|
||||
{categorieContent.map((item) => (
|
||||
<div
|
||||
className="col-lg-3 col-sm-6"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay={item.delayAnimation}
|
||||
key={item.id}
|
||||
>
|
||||
<div
|
||||
className="SC_block_one d-flex flex-column justify-content-center align-items-center"
|
||||
style={{ backgroundImage: item.bgImage }}
|
||||
>
|
||||
<h3 className="tran3s">{item.title}</h3>
|
||||
<a href="#" className="sp-now-btn tran3s">
|
||||
Shop Now
|
||||
</a>
|
||||
</div>
|
||||
{/* <!-- /.SC_block_one --> */}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Categorie;
|
||||
@@ -0,0 +1,58 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
const FancyBlock = () => {
|
||||
const fancyBlockCotent = [
|
||||
{
|
||||
id: 1,
|
||||
icon: "203",
|
||||
title: "Free Shipping",
|
||||
text: `Simplify the process to create proposals.`,
|
||||
delayAnim: "0",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: "204",
|
||||
title: "Free Return",
|
||||
text: `Return money within 7 days only!`,
|
||||
delayAnim: "100",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
icon: "205",
|
||||
title: "Secured Payment",
|
||||
text: `We ensure secure payment with PEV`,
|
||||
delayAnim: "200",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: "206",
|
||||
title: "100% Safe",
|
||||
text: `We provide world best security system`,
|
||||
delayAnim: "300",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
{fancyBlockCotent.map((item) => (
|
||||
<div
|
||||
className="col-lg-3 col-sm-6"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay={item.delayAnim}
|
||||
key={item.id}
|
||||
>
|
||||
<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={30} style={{objectFit:'contain'}} src={`/images/icon/${item.icon}.svg`} alt="icon" />
|
||||
</div>
|
||||
<h3>{item.title}</h3>
|
||||
<p className="ps-xl-3 pe-xl-3">{item.text}</p>
|
||||
</div>
|
||||
{/* <!-- /.block-style-thirtyNine --> */}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FancyBlock;
|
||||
@@ -0,0 +1,25 @@
|
||||
import React from "react";
|
||||
|
||||
const FlashSaleBanner = () => {
|
||||
return (
|
||||
<div className="banner-bg row no-gutters" data-aos="fade-up">
|
||||
<div className="col-lg-6 right-half position-relative order-lg-2">
|
||||
<div className="fancy-text font-recoleta">45% Off</div>
|
||||
<div className="sale-text">FLASH SALE</div>
|
||||
<h3>
|
||||
Summer hit <br /> collection sale go on...
|
||||
</h3>
|
||||
<p className="pt-20 pb-35">Event will be continue till 23 Aug</p>
|
||||
<a href="#" className="shop-btn-two tran3s">
|
||||
Shop Now
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="col-lg-6 left-half position-relative order-lg-1"
|
||||
style={{ background: "url(../images/media/img_125.jpg)" }}
|
||||
></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FlashSaleBanner;
|
||||
@@ -0,0 +1,58 @@
|
||||
'use client'
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import { Gallery, Item } from "react-photoswipe-gallery";
|
||||
|
||||
const GalleryBox = () => {
|
||||
const gridGallery = [
|
||||
{
|
||||
id: 1,
|
||||
img: "/images/media/img_126.jpg",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
img: "/images/media/img_127.jpg",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
img: "/images/media/img_128.jpg",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
img: "/images/media/img_129.jpg",
|
||||
},
|
||||
];
|
||||
return (
|
||||
<Gallery>
|
||||
<div className="row">
|
||||
{gridGallery.map((val) => (
|
||||
<div className="col-lg-3 col-6" key={val.id}>
|
||||
<div className="fancybox d-block w-100 mt-20">
|
||||
<Item
|
||||
original={val.img}
|
||||
thumbnail={val.img}
|
||||
width={400}
|
||||
height={394}
|
||||
>
|
||||
{({ ref, open }) => (
|
||||
<div className="gallery-link">
|
||||
<Image width={400} height={330} style={{width:'100%',height:'fit-content'}}
|
||||
src={val.img}
|
||||
alt="Trend Ui Gallery"
|
||||
className="w-100"
|
||||
role="button"
|
||||
ref={ref}
|
||||
onClick={open}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Item>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Gallery>
|
||||
);
|
||||
};
|
||||
|
||||
export default GalleryBox;
|
||||
@@ -0,0 +1,115 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState , useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import CartDropdown from "./CartDropdown";
|
||||
import Sidebar from "./Sidebar";
|
||||
import Image from "next/image";
|
||||
import { useContextElement } from "@/context/Context";
|
||||
|
||||
const Header = () => {
|
||||
const [navbar, setNavbar] = useState(false);
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
const [click2, setClick2] = useState(false);
|
||||
const handleClick2 = () => setClick2(!click2);
|
||||
|
||||
const {cartProducts} = useContextElement()
|
||||
|
||||
const changeBackground = () => {
|
||||
if (window.scrollY >= 90) {
|
||||
setNavbar(true);
|
||||
} else {
|
||||
setNavbar(false);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
|
||||
window.addEventListener("scroll", changeBackground);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", changeBackground);
|
||||
}
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
navbar
|
||||
? "theme-main-menu sticky-menu bg-none theme-menu-eight fixed"
|
||||
: "theme-main-menu sticky-menu bg-none theme-menu-eight"
|
||||
}
|
||||
>
|
||||
<div className="d-flex align-items-center justify-content-between">
|
||||
<div className="logo">
|
||||
<Link href="/">
|
||||
<Image width="137" height="34" src="/images/logo/deski_10.svg" alt="brand" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="right-widget d-flex align-items-center">
|
||||
<Link
|
||||
href="/login"
|
||||
className="signIn-action d-none d-sm-flex align-items-center"
|
||||
>
|
||||
<Image width="20" height="21" src="/images/icon/199.svg" alt="icon" className="me-2" />
|
||||
<span>login</span>
|
||||
</Link>
|
||||
|
||||
<div className="cart-group-wrapper position-relative">
|
||||
<button
|
||||
className="btn dropdown-toggle"
|
||||
type="button"
|
||||
onClick={handleClick}
|
||||
>
|
||||
<Image width="24" height="24" src="/images/icon/200.svg" alt="image" className="m-auto" />
|
||||
<span className="item-count">{cartProducts.length}</span>
|
||||
</button>
|
||||
<div
|
||||
className={click ? "dropdown-cart cart-show" : "dropdown-cart"}
|
||||
>
|
||||
<CartDropdown />
|
||||
</div>
|
||||
</div>
|
||||
{/* End .cart-group-wrapper */}
|
||||
|
||||
<button className="sidebar-nav-button" onClick={handleClick2}>
|
||||
<Image width="20" height="20" src="/images/icon/201.svg" alt="icon" />
|
||||
</button>
|
||||
{/* sidebar nav toggle button */}
|
||||
|
||||
<div
|
||||
className={click2 ? "main-sidebar-nav show" : "main-sidebar-nav"}
|
||||
>
|
||||
<div className="offcanvas-header d-flex justify-content-between align-items-center">
|
||||
<div className="logo">
|
||||
<Link href="/" className="d-block">
|
||||
<Image width="137" height="34" src="/images/logo/deski_10.svg" alt="brand" />
|
||||
</Link>
|
||||
</div>
|
||||
{/* End logo */}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="close-btn tran3s"
|
||||
onClick={handleClick2}
|
||||
>
|
||||
<i className="fa fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
{/* offcanvas-header */}
|
||||
|
||||
<Sidebar />
|
||||
</div>
|
||||
{/* main-sidebar-nav */}
|
||||
</div>
|
||||
{/* <!-- /.right-widget --> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@@ -0,0 +1,50 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
const Hero = () => {
|
||||
return (
|
||||
<div className="hero-banner-fifteen lg-container">
|
||||
<div className="container">
|
||||
<div className="position-relative">
|
||||
<div className="row">
|
||||
<div className="col-xl-5 col-md-6">
|
||||
<h1 className="hero-heading font-recoleta" data-aos="fade-right">
|
||||
New Wineter Item.
|
||||
</h1>
|
||||
<p
|
||||
className="hero-sub-heading"
|
||||
data-aos="fade-right"
|
||||
data-aos-delay="100"
|
||||
>
|
||||
We helping client to create websites with our talented expert.
|
||||
</p>
|
||||
<div
|
||||
className="d-sm-flex align-items-center"
|
||||
data-aos="fade-right"
|
||||
data-aos-delay="200"
|
||||
>
|
||||
<a href="#" className="shop-btn tran3s me-4">
|
||||
Shop Now
|
||||
</a>
|
||||
<a href="#" className="cart-btn tran3s">
|
||||
+
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* End .row */}
|
||||
|
||||
<div className="product-img-holder" data-aos="fade-left">
|
||||
<Image width={1009} height={955} style={{height:'fit-content'}} src="/images/shop/img_03.png" alt="image" className="product-img" />
|
||||
<div className="offer-sticker d-flex flex-column align-items-center justify-content-center">
|
||||
<span className="sn1">30%</span>
|
||||
<span className="sn2">OFF</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* End .product-img-holder */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
@@ -0,0 +1,23 @@
|
||||
'use client'
|
||||
|
||||
|
||||
|
||||
import MobileMenu from "../header/MobileMenu";
|
||||
|
||||
|
||||
|
||||
const Sidebar = () => {
|
||||
|
||||
return (
|
||||
<div className="mega-menu-wrapper ecommer-sidebar-wrapper">
|
||||
<div>
|
||||
<div>
|
||||
<MobileMenu/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
@@ -0,0 +1,87 @@
|
||||
'use client'
|
||||
|
||||
import Image from "next/image";
|
||||
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 { topItemContent } from "@/data/products";
|
||||
|
||||
const TopItem = () => {
|
||||
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}>
|
||||
{topItemContent.map((item) => (
|
||||
<div className="item" key={item.id}>
|
||||
<div className="product-block-one">
|
||||
<div className="img-holder">
|
||||
<Link
|
||||
href={`/products/${item.id}`}
|
||||
className="d-flex align-items-center justify-content-center h-100"
|
||||
>
|
||||
<Image width={305} height={370} style={{objectFit:'contain'}}
|
||||
src={`/images/shop/${item.img}.png`}
|
||||
alt="shop product"
|
||||
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 className="tag-one">{item.tag}</div>
|
||||
</div>
|
||||
{/* <!-- /.img-holder --> */}
|
||||
|
||||
<div className="product-meta">
|
||||
<div className="d-lg-flex align-items-center justify-content-between">
|
||||
<Link href={`/products/${item.id}`} className="product-title">
|
||||
{item.title}
|
||||
</Link>
|
||||
<ul className="style-none d-flex rating">{item.ratings}</ul>
|
||||
</div>
|
||||
<div className="price">${item.price.toFixed(2)}</div>
|
||||
</div>
|
||||
{/* <!-- /.product-meta --> */}
|
||||
</div>
|
||||
{/* <!-- /.product-block-one --> */}
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TopItem;
|
||||
@@ -0,0 +1,107 @@
|
||||
|
||||
'use client'
|
||||
|
||||
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import { useContextElement } from "@/context/Context";
|
||||
import Link from "next/link";
|
||||
const CartProduct = () => {
|
||||
|
||||
const {cartProducts,
|
||||
setCartProducts} = useContextElement()
|
||||
const handleIncrease = (index) => {
|
||||
const item = cartProducts[index];
|
||||
|
||||
item.quantity += 1;
|
||||
const updated = [...cartProducts];
|
||||
updated[index] = item;
|
||||
|
||||
setCartProducts(updated);
|
||||
};
|
||||
const handleDecrease = (index) => {
|
||||
const item = cartProducts[index];
|
||||
|
||||
if (item.quantity > 1) {
|
||||
item.quantity -= 1;
|
||||
const updated = [...cartProducts];
|
||||
updated[index] = item;
|
||||
|
||||
setCartProducts(updated);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveCart = (index) => {
|
||||
const item = cartProducts[index];
|
||||
|
||||
setCartProducts((pre) => [...pre.filter((elm) => elm !== item)]);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
|
||||
{cartProducts.map((elm,i)=>
|
||||
<tr key={i} >
|
||||
<td className="product-thumbnails">
|
||||
<a href="#" className="product-img">
|
||||
<Image width={465} height={609} style={{width:'100%',height:'fit-content'}} src={`/images/shop/${elm.img}.png`} alt="image" />
|
||||
</a>
|
||||
</td>
|
||||
<td className="product-info">
|
||||
<Link href={`/products/${elm.id}`} className="product-name">
|
||||
{elm.title}
|
||||
</Link>
|
||||
<div className="serial">#859632007881</div>
|
||||
<ul className="style-none">
|
||||
<li className="size">Size: 23”</li>
|
||||
<li className="color">Color: Red</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td className="price">
|
||||
<span>${elm.price.toFixed(2)}</span>
|
||||
</td>
|
||||
<td className="quantity">
|
||||
<ul className="order-box style-none">
|
||||
<li>
|
||||
<div onClick={()=>handleDecrease(i)} className="btn value-decrease">-</div>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="22"
|
||||
|
||||
value={elm.quantity}
|
||||
disabled
|
||||
className="product-value val"
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<div onClick={()=>handleIncrease(i)} className="btn value-increase">+ </div>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td className="price total-price">
|
||||
<span>${(elm.price * elm.quantity).toFixed(2)}</span>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#" onClick={()=>handleRemoveCart(i)} className="remove-product">
|
||||
x
|
||||
</a>
|
||||
</td>
|
||||
</tr>)}
|
||||
|
||||
|
||||
{cartProducts.length ? <>
|
||||
</> : <button className="theme-btn-seven update-cart-button hoverPurple" style={{margin:'20px auto'}} >
|
||||
<Link style={{color:'inherit',margin:'0px',padding:'0px'}} href={'/e-commerce'}>
|
||||
Continue Shoping</Link>
|
||||
</button> }
|
||||
|
||||
|
||||
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CartProduct;
|
||||
@@ -0,0 +1,32 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { useContextElement } from "@/context/Context";
|
||||
const CartTotal = () => {
|
||||
const {totalPrice,cartProducts} = useContextElement()
|
||||
return (
|
||||
<>
|
||||
<table className="cart-total-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Subtotal</th>
|
||||
<td>${totalPrice.toFixed(2)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Shipping Cost</th>
|
||||
<td>${(cartProducts.length * 10).toFixed(2)}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Total</th>
|
||||
<td>${((cartProducts.length * 10) + (totalPrice)).toFixed(2)}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{/* <!-- /.cart-total-table --> */}
|
||||
<Link href="/checkout" className="theme-btn-seven checkout-process mt-30">
|
||||
Checkout
|
||||
</Link>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CartTotal;
|
||||
@@ -0,0 +1,27 @@
|
||||
'use client'
|
||||
|
||||
import { useContextElement } from "@/context/Context";
|
||||
import React from "react";
|
||||
|
||||
const Coupon = () => {
|
||||
const {cartProducts} = useContextElement()
|
||||
return (
|
||||
<div className="coupon-section d-flex flex-column">
|
||||
{!cartProducts.length ? <></> :
|
||||
<div className="coupon-form d-lg-flex align-items-center">
|
||||
<input type="text" placeholder="Enter your code" />
|
||||
<button className="theme-btn-seven md-mt-20 sm-mb-20">
|
||||
Apply Coupne
|
||||
</button>
|
||||
</div> }
|
||||
{/* <!-- /.coupon-form --> */}
|
||||
<div className="mt-auto">
|
||||
<button className="theme-btn-seven update-cart-button">
|
||||
Update cart
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Coupon;
|
||||
@@ -0,0 +1,106 @@
|
||||
import React from "react";
|
||||
|
||||
const BillingDetails = () => {
|
||||
return (
|
||||
<div className="user-profile-data">
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="First Name*"
|
||||
className="single-input-wrapper"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Last Name*"
|
||||
className="single-input-wrapper"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Company Name*"
|
||||
className="single-input-wrapper"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<select className="theme-select-menu">
|
||||
<option defaultValue="">Country*</option>
|
||||
<option defaultValue="AF">Afghanistan</option>
|
||||
<option defaultValue="AX">Åland Islands</option>
|
||||
<option defaultValue="AL">Albania</option>
|
||||
<option defaultValue="DZ">Algeria</option>
|
||||
<option defaultValue="AS">American Samoa</option>
|
||||
<option defaultValue="AD">Andorra</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Street Address*"
|
||||
className="single-input-wrapper"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Town/City*"
|
||||
className="single-input-wrapper"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="State*"
|
||||
className="single-input-wrapper"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Zip Code*"
|
||||
className="single-input-wrapper"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email Address*"
|
||||
className="single-input-wrapper"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Phone Number*"
|
||||
className="single-input-wrapper"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<ul className="checkbox-list style-none">
|
||||
<li>
|
||||
<input type="checkbox" id="new-account" />
|
||||
<label htmlFor="new-account">Create Account?</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="shipping" />
|
||||
<label htmlFor="shipping">Ship to Different Address?</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="other-note-area">
|
||||
<p>Order Note (Optional)</p>
|
||||
<textarea></textarea>
|
||||
</div>
|
||||
{/* <!-- /.other-note-area --> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* <!-- /.row --> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BillingDetails;
|
||||
@@ -0,0 +1,26 @@
|
||||
import React from "react";
|
||||
|
||||
const CreditCard = () => {
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
<h6>Card number</h6>
|
||||
<input type="number" />
|
||||
</div>
|
||||
<div className="col-8">
|
||||
<h6>Expiry date</h6>
|
||||
<div className="d-flex align-items-center">
|
||||
<input type="number" placeholder="MM" />
|
||||
<span>/</span>
|
||||
<input type="number" placeholder="YY" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-4 ms-auto">
|
||||
<h6>CVV</h6>
|
||||
<input type="number" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreditCard;
|
||||
@@ -0,0 +1,46 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from "react";
|
||||
|
||||
const LogIn = () => {
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<p className="card-header">
|
||||
Already have an account?{" "}
|
||||
<button className="d-inline-block collapsed" onClick={handleClick}>
|
||||
Click here to login.
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<form
|
||||
onClick={handleSubmit}
|
||||
id="login-form"
|
||||
className={click ? "collapse show" : "collapse"}
|
||||
>
|
||||
<p>Please enter your details below.</p>
|
||||
<div className="row">
|
||||
<div className="col-md-6">
|
||||
<input type="text" placeholder="User name or email" required />
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<input type="password" placeholder="Password" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="theme-btn-seven">Login</button>
|
||||
<a href="#" className="lost-passw">
|
||||
Lost your Password?
|
||||
</a>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LogIn;
|
||||
@@ -0,0 +1,46 @@
|
||||
import React from "react";
|
||||
|
||||
const OrderDetails = () => {
|
||||
return (
|
||||
<table className="product-review">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>
|
||||
<span>Bluthooth Speaker</span>
|
||||
</th>
|
||||
<td>
|
||||
<span>$123.78</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<span>Subtotal</span>
|
||||
</th>
|
||||
<td>
|
||||
<span>$123.78</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
<span>Shipping</span>
|
||||
</th>
|
||||
<td>
|
||||
<span>$5.00</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>
|
||||
<span>Total</span>
|
||||
</th>
|
||||
<td>
|
||||
<span>$128.00</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
);
|
||||
};
|
||||
|
||||
export default OrderDetails;
|
||||
@@ -0,0 +1,76 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from "react";
|
||||
import CreditCard from "./CreditCard";
|
||||
|
||||
const Payment = () => {
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
|
||||
return (
|
||||
<div className="order-review">
|
||||
{/* <!-- /.product-review --> */}
|
||||
<div className="payment-option">
|
||||
<ul className="payment-list style-none">
|
||||
<li>
|
||||
<input
|
||||
type="radio"
|
||||
name="paymenttype"
|
||||
defaultValue="directbank"
|
||||
defaultChecked="checked"
|
||||
className="payment-radio-button"
|
||||
id="directbank"
|
||||
/>
|
||||
<label htmlFor="directbank">Direct Bank Transfer</label>
|
||||
<p>
|
||||
Make your payment directly into our account. Plase use your Order
|
||||
ID as payment reference.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
type="radio"
|
||||
name="paymenttype"
|
||||
defaultValue="paypal"
|
||||
id="paypal"
|
||||
className="payment-radio-button"
|
||||
/>
|
||||
<label htmlFor="paypal">PayPal</label>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
type="radio"
|
||||
name="paymenttype"
|
||||
value="creditCard"
|
||||
id="credit-card"
|
||||
className="payment-radio-button"
|
||||
onClick={handleClick}
|
||||
/>
|
||||
<label>Credit Card</label>
|
||||
</li>
|
||||
<li className={click ? "credit-card-form show" : "credit-card-form"}>
|
||||
<CreditCard />
|
||||
</li>
|
||||
</ul>
|
||||
{/* <!-- /.payment-list --> */}
|
||||
</div>
|
||||
{/* <!-- /.payment-option --> */}
|
||||
|
||||
<p className="policy-text">
|
||||
Your personal data will be use for your order, support your experience
|
||||
through this website & for other purpose described in our privacy policy
|
||||
</p>
|
||||
<div className="agreement-checkbox">
|
||||
<input type="checkbox" id="agreement" />
|
||||
<label htmlFor="agreement">
|
||||
I have read and agree to the website terms and conditions*
|
||||
</label>
|
||||
</div>
|
||||
{/* <!-- /.agreement-checkbox --> */}
|
||||
|
||||
<button className="theme-btn-seven w-100">Place Order</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Payment;
|
||||
@@ -0,0 +1,34 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from "react";
|
||||
|
||||
const PromoCode = () => {
|
||||
const [click, setClick] = useState(false);
|
||||
const handleClick = () => setClick(!click);
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<p className="card-header">
|
||||
Have a promo code?{" "}
|
||||
<button className="d-inline-block collapsed" onClick={handleClick}>
|
||||
Click to enter your code.
|
||||
</button>
|
||||
</p>
|
||||
<form
|
||||
onClick={handleSubmit}
|
||||
id="promo-code"
|
||||
className={click ? "collapse show" : "collapse"}
|
||||
>
|
||||
<p>Please enter your promo code below.</p>
|
||||
<input type="text" placeholder="Coupon code" />
|
||||
<button className="theme-btn-seven">Apply coupon</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PromoCode;
|
||||
@@ -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