118 lines
4.3 KiB
TypeScript
118 lines
4.3 KiB
TypeScript
"use client";
|
|
import Image from "next/legacy/image";
|
|
import Link from "next/link";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import { Autoplay } from "swiper/modules";
|
|
import "swiper/swiper-bundle.css";
|
|
import { useLatestPosts } from "@/lib/hooks/useBlog";
|
|
import { getValidImageUrl, getValidImageAlt, FALLBACK_IMAGES } from "@/lib/imageUtils";
|
|
|
|
const LatestPost = () => {
|
|
const { posts, loading, error } = useLatestPosts(8);
|
|
|
|
if (loading) {
|
|
return (
|
|
<section className="tp-latest-post pt-120 pb-120 bg-quinary">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<p className="text-center">Loading latest posts...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
if (error || posts.length === 0) {
|
|
return null; // Don't show the section if there's an error or no posts
|
|
}
|
|
|
|
return (
|
|
<section className="tp-latest-post pt-120 pb-120 bg-quinary">
|
|
<div className="container">
|
|
<div className="row vertical-column-gap align-items-center">
|
|
<div className="col-12 col-lg-7">
|
|
<div className="tp-lp-title text-center text-lg-start">
|
|
<h2 className="mt-8 fw-7 text-secondary title-anim">
|
|
Related Insights
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 col-lg-5">
|
|
<div className="tp-lp-cta text-center text-lg-end">
|
|
<Link href="/insights" className="btn-line text-uppercase">
|
|
View All Insights
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className="tp-lp-slider-wrapper mt-60">
|
|
<div className="tp-lp-slider-wrapper">
|
|
<Swiper
|
|
slidesPerView={"auto"}
|
|
spaceBetween={24}
|
|
slidesPerGroup={1}
|
|
freeMode={true}
|
|
speed={1200}
|
|
loop={posts.length > 3}
|
|
roundLengths={true}
|
|
modules={[Autoplay]}
|
|
autoplay={{
|
|
delay: 5000,
|
|
disableOnInteraction: false,
|
|
pauseOnMouseEnter: true,
|
|
}}
|
|
className="tp-lp-slider"
|
|
>
|
|
{posts.map((post) => (
|
|
<SwiperSlide key={post.id}>
|
|
<div className="tp-lp-slider__single topy-tilt">
|
|
<div className="thumb mb-24">
|
|
<Link href={`/insights/${post.slug}`} className="w-100 overflow-hidden">
|
|
<Image
|
|
src={getValidImageUrl(post.thumbnail, FALLBACK_IMAGES.BLOG)}
|
|
width={400}
|
|
height={220}
|
|
className="w-100 mh-220"
|
|
alt={getValidImageAlt(post.title)}
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="content">
|
|
<div className="tp-lp-post__meta mb-24 mt-8">
|
|
<p className="author text-xs text-tertiary">
|
|
{post.author_name || 'Admin'}
|
|
</p>
|
|
<span></span>
|
|
<p className="date text-xs text-tertiary">
|
|
{new Date(post.published_at || post.created_at).toLocaleDateString('en-US', {
|
|
day: 'numeric',
|
|
month: 'short',
|
|
year: 'numeric'
|
|
})}
|
|
</p>
|
|
</div>
|
|
<h5 className="mt-8 fw-5 text-secondary">
|
|
<Link href={`/insights/${post.slug}`}>
|
|
{post.title}
|
|
</Link>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default LatestPost;
|