"use client"; import Image from "next/image"; import Link from "next/link"; import { useCallback, useEffect, useRef, useState } from "react"; import { Reveal } from "@/components/Reveal"; import type { DisplayNewsItem } from "@/lib/api"; /** Horizontal snap-scroll rail of news/blog cards, matching the site's other carousels. */ export function NewsCarousel({ items, basePath, }: { items: DisplayNewsItem[]; basePath: string; }) { const trackRef = useRef(null); const [atStart, setAtStart] = useState(true); const [atEnd, setAtEnd] = useState(false); const syncEdges = useCallback(() => { const el = trackRef.current; if (!el) return; const travelled = Math.abs(el.scrollLeft); const max = el.scrollWidth - el.clientWidth; setAtStart(travelled < 8); setAtEnd(travelled >= max - 8); }, []); useEffect(() => { syncEdges(); const el = trackRef.current; if (!el) return; el.addEventListener("scroll", syncEdges, { passive: true }); window.addEventListener("resize", syncEdges); return () => { el.removeEventListener("scroll", syncEdges); window.removeEventListener("resize", syncEdges); }; }, [syncEdges]); const step = (direction: "next" | "prev") => { const el = trackRef.current; if (!el) return; const card = el.querySelector("li"); const amount = card ? card.getBoundingClientRect().width + 24 : el.clientWidth * 0.8; el.scrollBy({ left: direction === "next" ? -amount : amount, behavior: "smooth" }); }; const showArrows = items.length > 3; return (
{showArrows && (
)}
); }