blog

2026-04-17 12:02:41 +02:00
parent 1899335e60
commit 3c8dbade41
12 changed files with 595 additions and 1 deletions
@@ -0,0 +1,102 @@
+'use client';
+
+import { useRef, useEffect } from 'react';
+import Link from 'next/link';
+import { useTranslations } from 'next-intl';
+import { Article } from '@/lib/blog/types';
+
+type props = {
+    locale: string;
+    articles: Article[];
+};
+
+export function ArticleList({ locale, articles }: props) {
+    const ref = useRef<HTMLElement>(null);
+    const t = useTranslations('blogPage');
+
+    useEffect(() => {
+        const el = ref.current;
+        if (!el) return;
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting) {
+                    el.querySelectorAll('.reveal').forEach((node, i) => {
+                        setTimeout(() => node.classList.add('visible'), i * 100);
+                    });
+                    observer.unobserve(el);
+                }
+            },
+            { threshold: 0.05 }
+        );
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+
+    if (!articles.length) {
+        return (
+            <section className="py-24 px-8 md:px-14 lg:px-20 text-center">
+                <p className="font-sans text-sm text-brand-brown/40">{t('noArticles')}</p>
+            </section>
+        );
+    }
+
+    return (
+        <section ref={ref} className="py-20 px-8 md:px-14 lg:px-20 max-w-[900px] mx-auto">
+            <div className="flex flex-col divide-y divide-brand-brown/10">
+                {articles.map((article, i) => {
+                    const formatted = new Date(article.date).toLocaleDateString(
+                        locale === 'fr' ? 'fr-FR' : 'en-US',
+                        { year: 'numeric', month: 'long', day: 'numeric' }
+                    );
+
+                    return (
+                        <Link
+                            key={article.slug}
+                            href={`/${locale}/blog/${article.slug}`}
+                            className="reveal group flex flex-col md:flex-row md:items-center gap-6 py-10 cursor-pointer"
+                            style={{ transitionDelay: `${i * 80}ms` }}
+                        >
+                            <div className="flex-1 min-w-0">
+                                <div className="flex items-center gap-3 mb-3">
+                                    <span className="font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/40">
+                                        {article.category}
+                                    </span>
+                                    {article.readTime && (
+                                        <>
+                                            <span className="w-1 h-1 rounded-full bg-brand-brown/20" />
+                                            <span className="font-sans text-[10px] text-brand-brown/30">
+                                                {article.readTime}
+                                            </span>
+                                        </>
+                                    )}
+                                </div>
+                                <h2 className="font-serif text-[clamp(24px,3vw,36px)] leading-tight text-brand-brown uppercase mb-3 group-hover:opacity-70 transition-opacity duration-200">
+                                    {article.title}
+                                </h2>
+                                <p className="font-sans text-sm text-brand-brown/55 leading-relaxed line-clamp-2">
+                                    {article.description}
+                                </p>
+                                <span className="font-sans text-xs text-brand-brown/30 mt-3 block">
+                                    {formatted}
+                                </span>
+                            </div>
+
+                            <div className="flex items-center gap-2 font-sans text-xs uppercase tracking-[0.15em] text-brand-brown/40 group-hover:text-brand-brown transition-colors duration-200 flex-shrink-0">
+                                {t('readArticle')}
+                                <svg
+                                    className="w-4 h-4 group-hover:translate-x-1 transition-transform duration-200"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                    aria-hidden="true"
+                                >
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                                </svg>
+                            </div>
+                        </Link>
+                    );
+                })}
+            </div>
+        </section>
+    );
+}