81 lines
2.3 KiB
JavaScript
81 lines
2.3 KiB
JavaScript
"use client ";
|
|
|
|
import AppContext from "@ctx/AppContext";
|
|
import Image from "next/image";
|
|
import { useContext } from "react";
|
|
import Lightbox from "react-image-lightbox";
|
|
import logo from "../../public/images/logo.png";
|
|
|
|
const GalleryBox = ({ file }) => {
|
|
const CTX = useContext(AppContext);
|
|
|
|
const isOpenLightBox = CTX.state.isOpenLightBox;
|
|
|
|
return (
|
|
<div className=" w-full rounded-3xl">
|
|
<div className="flex justify-center xs:pb-[10px] ">
|
|
<div className="">
|
|
{file?.length > 0 ? (
|
|
<Image
|
|
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${
|
|
file && file[0].fileLocation
|
|
}`}
|
|
width={350}
|
|
height={350}
|
|
className=" mx-auto !object-cover"
|
|
onClick={() => CTX.setIsOpenLightBox(true)}
|
|
alt={file[0].fileName}
|
|
priority
|
|
loading="eager"
|
|
/>
|
|
) : (
|
|
<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"
|
|
alt="وسمه"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex overflow-x-auto p-3 " id="swich-scrollbar">
|
|
{file?.map((e) => (
|
|
<div
|
|
className="rounded-3xl bg-white border shadow-sm p-3 ml-2"
|
|
key={e.id}
|
|
onClick={() => CTX.setIsOpenLightBox(true)}
|
|
>
|
|
<div className="xs:w-[50px] lg:w-[50px]">
|
|
<Image
|
|
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${e.fileLocation}`}
|
|
alt={e.fileName}
|
|
width={50}
|
|
height={50}
|
|
priority
|
|
loading="eager"
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div>
|
|
{isOpenLightBox && (
|
|
<Lightbox
|
|
mainSrc={`http://storage.vesmeh.com/${
|
|
file && file[0].fileLocation
|
|
}`}
|
|
onCloseRequest={() => CTX.setIsOpenLightBox(false)}
|
|
// onImageLoadError={(e) =>
|
|
imageLoadErrorMessage={"باز نمیشه ؟!!!"}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GalleryBox;
|