293 lines
11 KiB
JavaScript
293 lines
11 KiB
JavaScript
"use client";
|
|
import Footer from "@comp/Footer/page";
|
|
import Navbar from "@comp/Navbar/page";
|
|
import GalleryBox from "plugins/Gallery/page";
|
|
import { useEffect, useState } from "react";
|
|
|
|
import AddToCart from "@comp/Cards/Components/AddToCart/page";
|
|
import Image from "next/image";
|
|
import PersianNumber from "plugins/PersianNumber";
|
|
import logo from "../../../public/images/logo.png";
|
|
import NavbarTransparent from "@comp/Navbar/NavbarTransparent";
|
|
|
|
const ProductData = ({ params, data }) => {
|
|
const [product, setProduct] = useState([]);
|
|
const [specificationsHeader, setSpecificationsHeader] = useState([]);
|
|
const [productBarDetail, setProductBarDetail] = useState(0);
|
|
|
|
const fetchPost = async (id) => {
|
|
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/product/${id}`);
|
|
const post = await res.json();
|
|
setProduct(post.product);
|
|
};
|
|
|
|
const displaySpecifications = (specs) => {
|
|
let data = [];
|
|
if (specs?.length > 3) {
|
|
specs?.slice(0, 3).forEach((spec) => {
|
|
const { title, value } = spec;
|
|
|
|
data.push(`${title}: ${value}`);
|
|
});
|
|
} else {
|
|
specs?.forEach((spec) => {
|
|
const { title, value } = spec;
|
|
|
|
data.push(`${title}: ${value}`);
|
|
});
|
|
}
|
|
|
|
setSpecificationsHeader(data); // You can replace
|
|
};
|
|
|
|
const scrollToSection = (id) => {
|
|
const element = document.getElementById(id);
|
|
if (element) {
|
|
const offset = -80; // Adjust this value as needed
|
|
window.scrollTo({
|
|
top: element.offsetTop + offset,
|
|
behavior: "smooth",
|
|
});
|
|
}
|
|
};
|
|
useEffect(() => {
|
|
fetchPost(params.id[0]);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
displaySpecifications(product?.specifications);
|
|
}, [product]);
|
|
|
|
return (
|
|
<>
|
|
<NavbarTransparent theme={1} />
|
|
<div className=" py-10">
|
|
<div className="grid xs:grid-cols-1 lg:grid-cols-8 rtl gap-6 lg:px-20">
|
|
<div className="lg:col-span-3 ">
|
|
<GalleryBox file={data?.product?.files} />
|
|
</div>
|
|
|
|
<div className="lg:col-span-3 xs:px-5 lg:px-0 ">
|
|
<div className="text-right mt-7">
|
|
<h1 className="text-lg font-medium ">
|
|
{data.product?.persianName}{" "}
|
|
</h1>
|
|
<p className="mb-0 text-sm text-gray-400">
|
|
{data?.product?.englishName}{" "}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex my-4">
|
|
<div className="bg-secondary-600 rounded-full py-1 px-3 ml-2">
|
|
<p className="mb-0 text-sm text-white ">تضمین بهترین قیمت </p>
|
|
</div>
|
|
|
|
{data?.product?.hasDiscount && (
|
|
<div className="bg-danger-100 rounded-full py-1 px-3 ml-2">
|
|
<p className="mb-0 text-sm text-white ">بمب امروز </p>
|
|
</div>
|
|
)}
|
|
|
|
{!data?.product?.warranty == "" && (
|
|
<div className="bg-secondary-500 rounded-full py-1 px-3 ml-2">
|
|
<p className="mb-0 text-sm text-white ">
|
|
{product?.warranty}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* <div className="flex my-5">
|
|
<div className="w-[30px] h-[30px] rounded-full bg-red-800 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
|
|
<div className="w-[30px] h-[30px] rounded-full bg-red-700 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
|
|
<div className="w-[30px] h-[30px] rounded-full bg-red-600 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
|
|
<div className="w-[30px] h-[30px] rounded-full bg-red-500 border-[5px] border-green-300 scale-110 shadow mr-2 cursor-pointer "></div>
|
|
<div className="w-[30px] h-[30px] rounded-full bg-red-400 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
|
|
<div className="w-[30px] h-[30px] rounded-full bg-red-300 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
|
|
<div className="w-[30px] h-[30px] rounded-full bg-red-200 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
|
|
</div> */}
|
|
|
|
<div>
|
|
<div className="text-right mt-3 flex justify-between">
|
|
<h2 className="mb-0 text-gray-400 text-sm">
|
|
{data?.product?.summery}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<ul className="mt-3 px-3">
|
|
{specificationsHeader.map((e, index) => (
|
|
<li className=" flex my-2" key={index}>
|
|
<div className="w-[10px] h-[10px] relative rounded-full bg-primary-500 mt-1"></div>
|
|
<p className="mb-0 w-full text-sm text-gray-700 mx-2 ">
|
|
{e}
|
|
</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* xs:sticky lg:relative xs:top-[60px] lg:top-0 ==> sticky for price=================== */}
|
|
|
|
<div className=" w-9/12 lg:col-span-2 sticky top-[80px] xs:hidden lg:block ">
|
|
<div className="p-3 h-fit border-[1px] border-gray-200 rounded-2xl rounded-tl-[40px]">
|
|
<div className="flex justify-center">
|
|
<div className="w-[130px]">
|
|
{data?.product?.files?.length > 0 ? (
|
|
<Image
|
|
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${
|
|
product.files && product.files[0].fileLocation
|
|
}`}
|
|
width={350}
|
|
height={350}
|
|
className=" mx-auto !object-cover"
|
|
onClick={() => CTX.setIsOpenLightBox(true)}
|
|
alt={`${product.persianName} - ${product.englishName}`}
|
|
property
|
|
loading="eager"
|
|
/>
|
|
) : (
|
|
<div className="xs:!w-[85px] lg:!w-[85px] my-10 ">
|
|
<Image
|
|
src={logo}
|
|
className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"
|
|
alt="وسمه"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<p className="mb-0 text-sm text-gray-500">
|
|
{data?.product?.persianName}{" "}
|
|
</p>
|
|
</div>
|
|
|
|
<div className=" mt-4 flex justify-between ">
|
|
{true ? (
|
|
<div className="flex justify-end">
|
|
<div className="mb-0 font-bold text-sm absolute mt-[-11px] ml-[0px] right-0 mr-[13px] text-red-600 flex rtl">
|
|
<del>
|
|
<PersianNumber
|
|
number={(data?.product?.cost / 10).toLocaleString()}
|
|
style={"text-[13px] opacity-40 "}
|
|
/>
|
|
</del>
|
|
</div>
|
|
<div className="flex rtl mt-[8px]">
|
|
{" "}
|
|
<p className="mb-0 font-bold">
|
|
<PersianNumber
|
|
number={(
|
|
data?.product?.costWithDiscount / 10
|
|
).toLocaleString()}
|
|
/>
|
|
</p>
|
|
<small className="mr-1 mt-[3px]">تومان</small>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="flex rtl mt-[3px]">
|
|
{" "}
|
|
<p className="mb-0 font-bold text-lg">
|
|
<PersianNumber
|
|
number={(data?.cost / 10).toLocaleString()}
|
|
/>
|
|
</p>
|
|
<small className="mr-1 mt-[6px]">تومان</small>
|
|
</div>
|
|
)}
|
|
<AddToCart data={data?.product} theme={2} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="lg:col-span-6">
|
|
<div className="xs:px-[15px] lg:px-[100px]">
|
|
<div id="section0">
|
|
<h3 className=" text-sm text-gray-400 mb-2">مشخصات محصول</h3>
|
|
<div className="min-w-[200px] mt-5 rounded-xl overflow-hidden border rtl ">
|
|
{product?.specifications?.map((e, index) => (
|
|
<div
|
|
className={
|
|
index % 2 === 0 ? "bg-gray-50 p-3" : "bg-gray-100 p-3"
|
|
}
|
|
key={index}
|
|
>
|
|
<p className="mb-0 text-sm text-gray-600">
|
|
{e.title}:
|
|
<small className="text-sm text-gray-800 font-bold ">
|
|
{" "}
|
|
{e.value}{" "}
|
|
</small>
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="section2">
|
|
<h3 className=" text-sm text-gray-400 mt-7 mb-2">
|
|
نقد و برسی{" "}
|
|
</h3>
|
|
<div className=" p-5 rounded-lg">
|
|
<div className="flex justify-center py-5">
|
|
<div className="bg-gray-50 w-fit rounded-xl rounded-tl-[30px] text-sm p-4">
|
|
چیزی یافت نشد
|
|
</div>
|
|
</div>
|
|
</div>{" "}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="xs:block lg:hidden sticky bottom-0 ">
|
|
<div className="w-full bg-[white] p-2 border-t-[1px] border-gray-100 mt-[30px]">
|
|
<div className="py-4 flex ltr justify-between px-4 relative">
|
|
{product?.hasDiscount ? (
|
|
<>
|
|
<p className="mb-0 font-bold text-sm absolute ml-[33px] opacity-30 mt-[-5px] text-red-600">
|
|
<del>
|
|
<PersianNumber
|
|
number={(data?.product?.cost / 10).toLocaleString()}
|
|
style="!text-[11px]"
|
|
/>
|
|
</del>
|
|
</p>
|
|
<div className="flex rtl mt-[8px]">
|
|
{" "}
|
|
<p className="mb-0 font-bold">
|
|
<PersianNumber
|
|
number={(
|
|
data?.product?.costWithDiscount / 10
|
|
).toLocaleString()}
|
|
/>
|
|
</p>
|
|
<small className="mr-1 mt-[3px]">تومان</small>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="flex rtl mt-[3px]">
|
|
{" "}
|
|
<p className="mb-0 font-bold text-lg">
|
|
<PersianNumber
|
|
number={(data?.product?.cost / 10).toLocaleString()}
|
|
/>
|
|
</p>
|
|
<small className="mr-1 mt-[6px]">تومان</small>
|
|
</div>
|
|
)}
|
|
<AddToCart data={data?.product} theme={2} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Footer />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ProductData;
|