"use client"; import { useEffect, useRef, useState } from "react"; import Link from "next/link"; type ArticleImage = { id: number; image: string; articleId: number; createdAt: string; }; type Article = { id: number; title: string; slug: string; excerpt: string | null; content: string; thumbnail: string | null; category: string | null; published: boolean; publishedAt: string | null; articleimage: ArticleImage[]; }; export default function Blog() { const [articles, setArticles] = useState([]); const [loading, setLoading] = useState(true); const [activeImages, setActiveImages] = useState< Record >({}); const [lightbox, setLightbox] = useState<{ articleId: number; imageIndex: number; } | null>(null); const [visibleArticles, setVisibleArticles] = useState< Record >({}); const articleRefs = useRef< Record >({}); /* ===================================================== GET ARTICLES ===================================================== */ useEffect(() => { const getArticles = async () => { try { const response = await fetch("/api/articles"); const result = await response.json(); if (result.success) { const publishedArticles = result.data.filter( (article: Article) => article.published === true ); setArticles(publishedArticles); } } catch (error) { console.error("GET ARTICLES:", error); } finally { setLoading(false); } }; getArticles(); }, []); /* ===================================================== SCROLL REVEAL ===================================================== */ useEffect(() => { if (loading || articles.length === 0) return; const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (!entry.isIntersecting) return; const id = Number( entry.target.getAttribute("data-article-id") ); if (!id) return; setVisibleArticles((previous) => ({ ...previous, [id]: true, })); observer.unobserve(entry.target); }); }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px", } ); articles.forEach((article) => { const element = articleRefs.current[article.id]; if (element) { observer.observe(element); } }); return () => { observer.disconnect(); }; }, [articles, loading]); /* ===================================================== FORMAT DATE ===================================================== */ const formatDate = (date: string | null) => { if (!date) return ""; return new Date(date).toLocaleDateString("id-ID", { day: "2-digit", month: "long", year: "numeric", }); }; /* ===================================================== CHANGE ARTICLE IMAGE ===================================================== */ const changeImage = ( articleId: number, direction: "next" | "prev", totalImages: number ) => { setActiveImages((previous) => { const current = previous[articleId] || 0; let nextIndex = current; if (direction === "next") { nextIndex = current === totalImages - 1 ? 0 : current + 1; } if (direction === "prev") { nextIndex = current === 0 ? totalImages - 1 : current - 1; } return { ...previous, [articleId]: nextIndex, }; }); }; /* ===================================================== SELECT IMAGE ===================================================== */ const selectImage = ( articleId: number, imageIndex: number ) => { setActiveImages((previous) => ({ ...previous, [articleId]: imageIndex, })); }; /* ===================================================== OPEN LIGHTBOX ===================================================== */ const openLightbox = ( articleId: number, imageIndex: number ) => { setLightbox({ articleId, imageIndex, }); }; /* ===================================================== LIGHTBOX NAVIGATION ===================================================== */ const changeLightboxImage = ( direction: "next" | "prev" ) => { if (!lightbox) return; const article = articles.find( (item) => item.id === lightbox.articleId ); if ( !article || article.articleimage.length === 0 ) { return; } const totalImages = article.articleimage.length; setLightbox((previous) => { if (!previous) return previous; let nextIndex = previous.imageIndex; if (direction === "next") { nextIndex = previous.imageIndex === totalImages - 1 ? 0 : previous.imageIndex + 1; } if (direction === "prev") { nextIndex = previous.imageIndex === 0 ? totalImages - 1 : previous.imageIndex - 1; } return { ...previous, imageIndex: nextIndex, }; }); }; return ( <> {/* ================================================= CSS BIASA Tidak menggunakan style jsx ================================================= */} {/* ================================================= BLOG SECTION ================================================= */}
{/* ================================================= HEADER ================================================= */}
Blog & Insights
{/* TITLE */}

Latest Articles

{/* ANIMATED LINE */}
{/* DESCRIPTION */}

Explore articles, experiences, tutorials, and insights on technology, software development, engineering, and digital solutions.

{/* ================================================= LOADING ================================================= */} {loading && (
{[1, 2, 3].map((item) => (
))}
)} {/* ================================================= EMPTY STATE ================================================= */} {!loading && articles.length === 0 && (

No Articles Yet

There are currently no articles published. Please check back later to discover the latest content.

)} {/* ================================================= ARTICLES ================================================= */} {!loading && articles.length > 0 && (
{articles.map((article, index) => { const currentImage = activeImages[article.id] || 0; const hasImages = article.articleimage && article.articleimage.length > 0; const isVisible = visibleArticles[article.id]; return (
{ articleRefs.current[ article.id ] = element; }} data-article-id={ article.id } >
{/* ANIMATED TOP LINE */}
{/* ================================================= IMAGE ================================================= */} {hasImages ? ( <>
{ openLightbox( article.id, currentImage ) } style={{ objectFit: "cover", cursor: "zoom-in", }} />
{article .articleimage .length > 1 && ( <> {/* PREVIOUS */} {/* NEXT */} {/* COUNTER */} {currentImage + 1}{" "} /{" "} { article .articleimage .length } )}
{/* DOTS */} {article.articleimage .length > 1 && (
{article .articleimage .map( ( img, imageIndex ) => (
)} ) : article.thumbnail ? (
{
) : (
)} {/* ================================================= CONTENT ================================================= */}
{article.category ? ( { article.category } ) : ( )} {article.publishedAt && ( {formatDate( article.publishedAt )} )}
{/* TITLE */}

{article.title}

{/* EXCERPT */} {article.excerpt && (

{ article.excerpt }

)} {/* BUTTON */}
Read Article
); })}
)} {/* ================================================= LIGHTBOX ================================================= */} {lightbox && (
setLightbox(null) } > {/* CLOSE */} {/* IMAGE */} article.id === lightbox.articleId )?.articleimage[ lightbox.imageIndex ]?.image } alt="Article image" style={{ maxWidth: "90%", maxHeight: "85vh", objectFit: "contain", borderRadius: "12px", }} onClick={(event) => event.stopPropagation() } /> {/* PREVIOUS */} {/* NEXT */} {/* COUNTER */} {lightbox.imageIndex + 1}{" "} /{" "} { articles.find( (article) => article.id === lightbox.articleId )?.articleimage.length }
)}
); }