155 lines
4.4 KiB
TypeScript
155 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import "swiper/css";
|
|
import "swiper/css/effect-cards";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
import { Autoplay, EffectCards } from "swiper/modules";
|
|
import type { Swiper as SwiperType } from "swiper";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const IMAGES = [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/person1.jpg",
|
|
alt: "پرتره سارا احمدی در فضای شهری",
|
|
name: "سارا احمدی",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/person2.jpg",
|
|
alt: "پرتره مریم رضایی در نور طبیعی",
|
|
name: "مریم رضایی",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/person3.jpg",
|
|
alt: "پرتره نیلوفر کریمی در استودیو",
|
|
name: "نیلوفر کریمی",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/random11.jpg",
|
|
alt: "پرتره امیر حسینی در فضای باز",
|
|
name: "امیر حسینی",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/random11.jpg",
|
|
alt: "پرتره لیلا محمدی در فضای شهری",
|
|
name: "لیلا محمدی",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/person1.jpg",
|
|
alt: "پرتره کامران نظری در نور طبیعی",
|
|
name: "کامران نظری",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/person2.jpg",
|
|
alt: "پرتره فاطمه موسوی در استودیو",
|
|
name: "فاطمه موسوی",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/person3.jpg",
|
|
alt: "پرتره پدرام جعفری در فضای باز",
|
|
name: "پدرام جعفری",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/random11.jpg",
|
|
alt: "پرتره سمیه لاری در فضای شهری",
|
|
name: "سمیه لاری",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/person2.jpg",
|
|
alt: "پرتره علی رضایی در نور طبیعی",
|
|
name: "علی رضایی",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/person1.jpg",
|
|
alt: "پرتره مایا اکبری در استودیو",
|
|
name: "مایا اکبری",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/person3.jpg",
|
|
alt: "پرتره رضا امجد در فضای باز",
|
|
name: "رضا امجد",
|
|
},
|
|
];
|
|
|
|
const css = `
|
|
.mySwiper18 {
|
|
width: min(78vw, 260px);
|
|
height: min(102vw, 340px);
|
|
margin-inline: auto;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.mySwiper18 {
|
|
width: 260px;
|
|
height: 340px;
|
|
}
|
|
}
|
|
|
|
.mySwiper18 .swiper-slide {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 25px;
|
|
}
|
|
|
|
.mySwiper18 .swiper-slide-active {
|
|
overflow: visible !important;
|
|
}
|
|
`;
|
|
|
|
interface Gallery18Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Gallery18 = ({ className }: Gallery18Props) => {
|
|
const swiperRef = useRef<SwiperType | null>(null);
|
|
|
|
useEffect(() => {
|
|
swiperRef.current?.update();
|
|
}, []);
|
|
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-16 sm:py-24 lg:py-32", className)}>
|
|
<style>{css}</style>
|
|
<div className="container flex flex-col items-center gap-6 px-4 sm:gap-10">
|
|
<div className="relative flex w-full justify-center overflow-visible pb-10 sm:pb-12">
|
|
<Swiper
|
|
dir="rtl"
|
|
effect="cards"
|
|
autoplay={{
|
|
delay: 1000,
|
|
disableOnInteraction: false,
|
|
}}
|
|
loop={true}
|
|
grabCursor={true}
|
|
modules={[EffectCards, Autoplay]}
|
|
className="mySwiper18"
|
|
onSwiper={(swiper) => {
|
|
swiperRef.current = swiper;
|
|
}}
|
|
>
|
|
{IMAGES.map((image, index) => (
|
|
<SwiperSlide key={`${image.name}-${index}`} className="relative">
|
|
<img
|
|
className="h-full w-full overflow-hidden rounded-3xl object-cover"
|
|
src={image.src}
|
|
alt={image.alt}
|
|
/>
|
|
<div className="absolute inset-x-0 -bottom-10 flex h-10 items-end justify-center text-center font-sans text-[10px] font-light sm:-bottom-12 sm:h-12 sm:text-xs">
|
|
<span dir="rtl">
|
|
@{image.name.replace(/\s+/g, "_")}
|
|
</span>
|
|
</div>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Gallery18 };
|