90 lines
2.7 KiB
JavaScript
90 lines
2.7 KiB
JavaScript
"use client ";
|
|
|
|
import React from "react";
|
|
import p1 from "../../public/images/product/1.png";
|
|
import p2 from "../../public/images/product/2.png";
|
|
import p3 from "../../public/images/product/3.png";
|
|
import p4 from "../../public/images/product/4.png";
|
|
import Image from "next/image";
|
|
|
|
const GalleryBox = ({ file }) => {
|
|
console.log(file && file[0]?.fileLocation);
|
|
return (
|
|
<div className=" w-full rounded-3xl">
|
|
<div className="flex justify-center xs:pb-[10px] lg:py-10">
|
|
<div className="xs:w-[190px] lg:w-[290px]">
|
|
{!!file ? (
|
|
<Image
|
|
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${
|
|
file && file[0].fileLocation
|
|
}`}
|
|
width={500}
|
|
height={500}
|
|
className="xs:!w-[110px] lg:!w-[130px] mx-auto !object-cover"
|
|
/>
|
|
) : (
|
|
<div className="xs:!w-[85px] lg:!w-[85px] ">
|
|
{/* <Image
|
|
src={logo}
|
|
className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"
|
|
/> */}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex overflow-x-auto p-3 " id="swich-scrollbar">
|
|
<div className="rounded-3xl bg-gray-200 p-3 ml-2 inline-block">
|
|
<div className="xs:w-[50px] lg:w-[80px]">
|
|
<Image src={p1} />
|
|
</div>
|
|
</div>
|
|
<div className="rounded-3xl bg-gray-200 p-3 ml-2">
|
|
<div className="xs:w-[50px] lg:w-[80px]">
|
|
<Image src={p2} />
|
|
</div>
|
|
</div>
|
|
<div className="rounded-3xl bg-gray-200 p-3 ml-2">
|
|
<div className="xs:w-[50px] lg:w-[80px]">
|
|
<Image src={p3} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-3xl bg-gray-200 p-3 ml-2">
|
|
<div className="xs:w-[50px] lg:w-[80px]">
|
|
<Image src={p4} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-3xl bg-gray-200 p-3 ml-2 inline-block">
|
|
<div className="xs:w-[50px] lg:w-[80px]">
|
|
{" "}
|
|
<Image src={p1} />
|
|
</div>
|
|
</div>
|
|
<div className="rounded-3xl bg-gray-200 p-3 ml-2">
|
|
<div className="xs:w-[50px] lg:w-[80px]">
|
|
{" "}
|
|
<Image src={p2} />
|
|
</div>
|
|
</div>
|
|
<div className="rounded-3xl bg-gray-200 p-3 ml-2">
|
|
<div className="xs:w-[50px] lg:w-[80px]">
|
|
{" "}
|
|
<Image src={p3} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-3xl bg-gray-200 p-3 ml-2">
|
|
<div className="xs:w-[50px] lg:w-[80px]">
|
|
{" "}
|
|
<Image src={p4} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GalleryBox;
|