48 lines
1.3 KiB
Plaintext
48 lines
1.3 KiB
Plaintext
---
|
|
import type { timelineEntry } from "@interfaces/timeline.ts";
|
|
|
|
interface Props {
|
|
timeline: timelineEntry[];
|
|
}
|
|
|
|
const { timeline = [] } = Astro.props;
|
|
---
|
|
|
|
<custom-timeline>
|
|
<div class="flex w-full flex-col">
|
|
<div
|
|
class="3xl:grid-cols-6 z-10 grid max-w-full grid-flow-row gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
|
|
data-timeline
|
|
>
|
|
{
|
|
timeline
|
|
.sort((a: timelineEntry, b: timelineEntry) =>
|
|
a.date.diff(b.date).toMillis(),
|
|
)
|
|
.map((entry, index) => (
|
|
<div
|
|
class="border-caperren-green min-w-s max-w-s rounded-lg border bg-black px-2 pt-1 pb-2"
|
|
data-timeline-node-index={index}
|
|
>
|
|
<h3 class="text-lg font-bold">{entry.event}</h3>
|
|
<h4 class="leading-none font-semibold">{entry.eventDetail}</h4>
|
|
<time class="mt-1 mb-2 text-sm leading-none italic">
|
|
{entry.date.toFormat("LLLL kkkk")}
|
|
</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>
|
|
</div>
|
|
</custom-timeline>
|
|
|
|
<script src="./timeline.ts"></script>
|