73 lines
2.1 KiB
JavaScript
73 lines
2.1 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 = () => {
|
|
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]">
|
|
<Image src={p4} />
|
|
</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;
|