blog article summary

2026-04-17 12:05:36 +02:00
parent 3c8dbade41
commit f1418fe25b
6 changed files with 76 additions and 2 deletions
@@ -0,0 +1,54 @@
+'use client';
+
+import { useRef, useEffect } from 'react';
+import { useTranslations } from 'next-intl';
+
+type props = {
+    items: string[];
+};
+
+export function ArticleSummary({ items }: props) {
+    const ref = useRef<HTMLDivElement>(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 * 80);
+                    });
+                    observer.unobserve(el);
+                }
+            },
+            { threshold: 0.1 }
+        );
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+
+    return (
+        <div ref={ref} className="mb-14 border border-brand-brown/12 rounded-xl p-8 bg-brand-brown/[0.03]">
+            <div className="flex items-center gap-3 mb-6">
+                <span className="w-5 h-px bg-brand-brown/30" />
+                <span className="font-sans text-[10px] uppercase tracking-[0.22em] text-brand-brown/40">
+                    {t('summary.label')}
+                </span>
+            </div>
+            <ol className="flex flex-col gap-3">
+                {items.map((item, i) => (
+                    <li key={i} className="reveal flex items-baseline gap-4" style={{ transitionDelay: `${i * 60}ms` }}>
+                        <span className="font-serif text-base text-brand-brown/25 tabular-nums flex-shrink-0 w-4 text-right">
+                            {String(i + 1).padStart(2, '0')}
+                        </span>
+                        <span className="font-sans text-sm text-brand-brown/65 leading-relaxed">
+                            {item}
+                        </span>
+                    </li>
+                ))}
+            </ol>
+        </div>
+    );
+}