82 lines
2.9 KiB
TypeScript
82 lines
2.9 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
import styles from './Blogs.module.css'
|
|
import { blogData } from '@/utils/constant'
|
|
|
|
export default function Blogs() {
|
|
const [currentIndex, setCurrentIndex] = useState(0)
|
|
|
|
const nextSlide = () => {
|
|
setCurrentIndex((prev) => (prev + 1) % blogData.length)
|
|
}
|
|
|
|
const prevSlide = () => {
|
|
setCurrentIndex((prev) => (prev === 0 ? blogData.length - 1 : prev - 1))
|
|
}
|
|
|
|
// Auto-slide effect
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setCurrentIndex((prev) => (prev + 1) % blogData.length)
|
|
}, 5000) // Change slide every 5 seconds
|
|
|
|
return () => clearInterval(interval)
|
|
}, [])
|
|
|
|
// Get the 3 visible blogs
|
|
const getVisibleBlogs = () => {
|
|
const items = []
|
|
for (let i = 0; i < 3; i++) {
|
|
const index = (currentIndex + i) % blogData.length
|
|
items.push(blogData[index])
|
|
}
|
|
return items
|
|
}
|
|
|
|
const visibleItems = getVisibleBlogs()
|
|
|
|
return (
|
|
<section className={styles.section} id="blog">
|
|
<div className={styles.smallHeading} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px' }}>
|
|
<Image src="/images/dinner.png" alt="Antalya Dinner Icon" width={24} height={24} />
|
|
<span>TASTE JOURNAL</span>
|
|
<Image src="/images/eat.png" alt="Antalya Cutlery Icon" width={24} height={24} />
|
|
</div>
|
|
<h2 className={styles.title}>Our Blogs</h2>
|
|
|
|
<div className={styles.sliderContainer}>
|
|
<button className={`${styles.arrow} ${styles.prevArrow}`} onClick={prevSlide}>←</button>
|
|
|
|
{visibleItems.map((blog) => (
|
|
<div key={blog.id} className={styles.card}>
|
|
<div className={styles.imageContainer}>
|
|
<Image
|
|
src={blog.imageDetail}
|
|
alt={blog.title}
|
|
fill
|
|
style={{ objectFit: 'cover' }}
|
|
/>
|
|
</div>
|
|
<h3 className={styles.blogTitle}>{blog.title}</h3>
|
|
<p className={styles.excerpt}>{blog.para}</p>
|
|
<Link href={`/antalya-turkish-food-blog/${blog.slug}`} className={styles.button}>
|
|
View More
|
|
</Link>
|
|
</div>
|
|
))}
|
|
|
|
<button className={`${styles.arrow} ${styles.nextArrow}`} onClick={nextSlide}>→</button>
|
|
</div>
|
|
|
|
<div className={styles.viewMoreContainer}>
|
|
<Link href="/antalya-turkish-food-blog" className={styles.viewMoreButton}>
|
|
Read More Blogs
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|