148 lines
6.1 KiB
TypeScript
148 lines
6.1 KiB
TypeScript
import { createClient } from '@sanity/client'
|
|
import axios from 'axios'
|
|
import { projectId } from 'lib/sanity.api'
|
|
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
import React, { Children, useEffect, useState } from 'react'
|
|
import { Fade, Slide } from 'react-awesome-reveal'
|
|
import { Carousel } from '@material-tailwind/react'
|
|
import { format, parseISO } from 'date-fns'
|
|
import { IoCalendarOutline, IoNewspaperOutline } from 'react-icons/io5'
|
|
|
|
const GalleryCard = () => {
|
|
const [data, setData] = useState([])
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
const response = await axios.get('/api/galleryData')
|
|
setData(response.data)
|
|
} catch (error) {
|
|
console.error('Error fetching data:', error)
|
|
}
|
|
}
|
|
fetchData()
|
|
}, [])
|
|
|
|
return (
|
|
<div className="p-5">
|
|
<div className="grid grid-cols-1 gap-10 sm:grid-cols-3">
|
|
{data.map((item) => (
|
|
<div key={item._id}>
|
|
<div className="galleryCardContainer rounded-md border pb-4 shadow-sm">
|
|
<div className="galleryCardHeader"></div>
|
|
<div className="galleryCardBody">
|
|
<Carousel
|
|
placeholder={null}
|
|
loop={true}
|
|
navigation={({ setActiveIndex, activeIndex, length }) => (
|
|
<div className="absolute bottom-4 left-2/4 z-50 flex -translate-x-2/4 gap-2">
|
|
{new Array(length).fill('').map((_, i) => (
|
|
<span
|
|
key={i}
|
|
className={`block h-1 cursor-pointer rounded-2xl transition-all content-[''] ${
|
|
activeIndex === i
|
|
? 'w-8 bg-white'
|
|
: 'w-4 bg-white/50'
|
|
}`}
|
|
onClick={() => setActiveIndex(i)}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
className=""
|
|
>
|
|
{/* loop */}
|
|
{/* # 1 */}
|
|
{/* alt = {item.images.altTxt} */}
|
|
<Image
|
|
src={item.photosSourceURL[0]}
|
|
alt={item.altTxt[0]}
|
|
width={768}
|
|
height={432}
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
|
quality={75}
|
|
placeholder="empty"
|
|
className="aspect-[3/2] h-full w-full object-cover duration-700 ease-in-out hover:contrast-125 hover:transition"
|
|
/>
|
|
{/* # 2 */}
|
|
<Image
|
|
src={item.photosSourceURL[1]}
|
|
alt={item.altTxt[1]}
|
|
width={768}
|
|
height={432}
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
|
quality={75}
|
|
placeholder="empty"
|
|
className="aspect-[3/2] h-full w-full object-cover duration-700 ease-in-out hover:contrast-125 hover:transition"
|
|
/>
|
|
{/* # 3 */}
|
|
<Image
|
|
src={item.photosSourceURL[2]}
|
|
alt={item.altTxt[3]}
|
|
width={768}
|
|
height={432}
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
|
quality={75}
|
|
placeholder="empty"
|
|
className="aspect-[3/2] h-full w-full object-cover duration-700 ease-in-out hover:contrast-125 hover:transition"
|
|
/>
|
|
{/* # 4 */}
|
|
<Image
|
|
src={item.photosSourceURL[3]}
|
|
alt={item.altTxt[3]}
|
|
width={768}
|
|
height={432}
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
|
quality={75}
|
|
placeholder="empty"
|
|
className="aspect-[3/2] h-full w-full object-cover duration-700 ease-in-out hover:contrast-125 hover:transition"
|
|
/>
|
|
{/* # 5 */}
|
|
<Image
|
|
src={item.photosSourceURL[4]}
|
|
alt={item.altTxt[4]}
|
|
width={768}
|
|
height={432}
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
|
quality={75}
|
|
placeholder="empty"
|
|
className="aspect-[3/2] h-full w-full object-cover duration-700 ease-in-out hover:contrast-125 hover:transition"
|
|
/>
|
|
{/* # 6 */}
|
|
<Image
|
|
src={item.photosSourceURL[5]}
|
|
alt={item.altTxt[5]}
|
|
width={768}
|
|
height={432}
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
|
quality={75}
|
|
placeholder="empty"
|
|
className="aspect-[3/2] h-full w-full object-cover duration-700 ease-in-out hover:contrast-125 hover:transition"
|
|
/>
|
|
</Carousel>
|
|
</div>
|
|
<div className="galleryCardFooter pt-6">
|
|
<Link href={item.pixiesetURL}>
|
|
<h2 className="mb-0 pb-1 text-center font-sans text-base font-medium leading-none duration-200 ease-in-out hover:text-yellow-600 sm:text-base">
|
|
{item.title}
|
|
</h2>
|
|
</Link>
|
|
<div className="text-center">
|
|
<span className="inline-flex items-center font-sans text-xs text-stone-600">
|
|
<IoCalendarOutline />
|
|
|
|
{format(new Date(item.date), 'dd-MM-yyyy')}
|
|
</span>
|
|
</div>
|
|
{/* <div className="mb-0 pb-3 text-stone-400 text-center font-sans text-sm leading-none sm:text-sm">
|
|
{format(new Date(item.date), 'dd-MM-yyyy')}</div> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
export default GalleryCard
|