adilallo
103 lines
3.2 KiB
JavaScript
103 lines
3.2 KiB
JavaScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import ContentThumbnailTemplate from "./ContentThumbnailTemplate";
|
|
|
|
export default function RelatedArticles({ relatedPosts, currentPostSlug }) {
|
|
// Filter out the current post from related posts
|
|
const filteredPosts = relatedPosts.filter(
|
|
(post) => post.slug !== currentPostSlug
|
|
);
|
|
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
const [progress, setProgress] = useState(0);
|
|
|
|
// Auto-advance every 3 seconds
|
|
useEffect(() => {
|
|
if (filteredPosts.length <= 1) return;
|
|
|
|
const interval = setInterval(() => {
|
|
setProgress(0);
|
|
setCurrentIndex((prev) => (prev + 1) % filteredPosts.length);
|
|
}, 3000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, [filteredPosts.length]);
|
|
|
|
// Progress animation
|
|
useEffect(() => {
|
|
if (filteredPosts.length <= 1) return;
|
|
|
|
const progressInterval = setInterval(() => {
|
|
setProgress((prev) => {
|
|
if (prev >= 100) {
|
|
return 0;
|
|
}
|
|
return prev + 1;
|
|
});
|
|
}, 30); // 30ms intervals for smooth animation
|
|
|
|
return () => clearInterval(progressInterval);
|
|
}, [currentIndex, filteredPosts.length]);
|
|
|
|
if (filteredPosts.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<section className="py-[var(--spacing-scale-032)]">
|
|
<div className="flex flex-col gap-[var(--spacing-scale-032)]">
|
|
<h2 className="text-[32px] leading-[110%] font-medium text-[var(--color-content-inverse-primary)] text-center">
|
|
Related Articles
|
|
</h2>
|
|
|
|
{/* Horizontal Articles Row - All Visible with Centering */}
|
|
<div className="flex justify-center overflow-hidden">
|
|
<div
|
|
className="flex gap-0 transition-transform duration-500 ease-in-out"
|
|
style={{
|
|
transform: `translateX(calc(50% - 130px - ${
|
|
currentIndex * 260
|
|
}px))`,
|
|
}}
|
|
>
|
|
{filteredPosts.map((relatedPost, index) => (
|
|
<div
|
|
key={relatedPost.slug}
|
|
className="flex flex-col items-center"
|
|
>
|
|
<ContentThumbnailTemplate
|
|
post={relatedPost}
|
|
variant="vertical"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Three separate progress bars below the carousel */}
|
|
<div className="flex justify-center gap-[var(--measures-spacing-008)] px-[var(--measures-spacing-064)]">
|
|
{filteredPosts.map((relatedPost, index) => (
|
|
<div
|
|
key={relatedPost.slug}
|
|
className="max-w-[var(--measures-spacing-056)] w-full h-[var(--measures-spacing-004)] bg-gray-200 rounded-full overflow-hidden"
|
|
>
|
|
<div
|
|
className="h-full bg-gray-600 rounded-full transition-all duration-75 ease-linear"
|
|
style={{
|
|
width:
|
|
index === currentIndex
|
|
? `${progress}%`
|
|
: index < currentIndex
|
|
? "100%"
|
|
: "0%",
|
|
}}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|