36 lines
1.4 KiB
Plaintext
36 lines
1.4 KiB
Plaintext
---
|
|
import type {timelineEntry} from "@interfaces/timeline.ts";
|
|
|
|
const timeline: timelineEntry[] = Astro.props.timeline || [];
|
|
---
|
|
|
|
<custom-timeline>
|
|
<div class="flex flex-col w-full">
|
|
<div class="z-10 grid gap-6 grid-flow-row max-w-full sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-6"
|
|
data-timeline>
|
|
{timeline.map((entry, index) => (
|
|
<div class="pt-1 border bg-black border-caperren-green rounded-lg min-w-s max-w-s px-2 pb-2"
|
|
data-timeline-node-index={index}
|
|
>
|
|
<h3 class="text-lg font-bold">
|
|
{entry.event}
|
|
</h3>
|
|
<h4 class="font-semibold leading-none">
|
|
{entry.eventDetail}
|
|
</h4>
|
|
<time class="mb-2 mt-1 text-sm italic leading-none">
|
|
{entry.date}
|
|
</time>
|
|
{entry.description && (
|
|
<p class="text-sm font-normal">
|
|
{entry.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div class="z-0 w-full max-w-full overflow-x-visible" data-custom-timeline-line-wrapper/>
|
|
</div>
|
|
</custom-timeline>
|
|
|
|
<script src="./timeline.ts"/> |