lore

src/components/Timeline.astro

@@ -0,0 +1,89 @@
+---
+// src/components/Timeline.astro
+interface Props {
+    eras: {
+        id: string;
+        title: string;
+    }[];
+}
+const { eras } = Astro.props;
+---
+
+<div class="timeline-ribbon">
+    <div class="scroll-container">
+        <button class="era-chip active" data-era="all">
+            Toutes les Ères
+        </button>
+
+        {
+            eras.map((era) => (
+                <button class="era-chip" data-era={era.id}>
+                    <span class="scribe-icon">◈</span> {era.title}
+                </button>
+            ))
+        }
+    </div>
+</div>
+
+<style>
+    .timeline-ribbon {
+        margin: 2rem 0;
+        padding: 1rem 0;
+        border-top: 1px solid rgba(200, 155, 60, 0.2);
+        border-bottom: 1px solid rgba(200, 155, 60, 0.2);
+    }
+
+    .scroll-container {
+        display: flex;
+        gap: 1rem;
+        overflow-x: auto;
+        padding: 0.5rem;
+        scrollbar-width: none; /* Firefox */
+        -ms-overflow-style: none; /* IE */
+    }
+
+    .scroll-container::-webkit-scrollbar {
+        display: none; /* Chrome/Safari */
+    }
+
+    .era-chip {
+        flex: 0 0 auto;
+        background: white;
+        border: 1px solid #dcd0b9;
+        padding: 0.6rem 1.2rem;
+        border-radius: 4px;
+        font-family: "Cinzel", serif;
+        font-size: 0.85rem;
+        color: var(--color-ink);
+        cursor: pointer;
+        transition: all 0.2s ease;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        white-space: nowrap;
+    }
+
+    .era-chip:hover {
+        border-color: var(--color-gold);
+        background: #fdfaf3;
+    }
+
+    .era-chip.active {
+        background: var(--color-gold);
+        color: white;
+        border-color: var(--color-gold);
+        box-shadow: 0 2px 8px rgba(200, 155, 60, 0.3);
+    }
+
+    .scribe-icon {
+        font-size: 0.9rem;
+        opacity: 0.8;
+    }
+
+    @media (max-width: 640px) {
+        .era-chip {
+            font-size: 0.75rem;
+            padding: 0.5rem 1rem;
+        }
+    }
+</style>