29 lines
977 B
Svelte
29 lines
977 B
Svelte
<script lang="ts">
|
|
import Collapsible from "./Collapsible.svelte";
|
|
|
|
export let timelineData: Array<{
|
|
title: string;
|
|
description: string;
|
|
duration: string;
|
|
}>;
|
|
</script>
|
|
|
|
<div class="flex flex-col items-center justify-center">
|
|
<div class="max-w-4xl w-full">
|
|
{#each timelineData as entry, i}
|
|
<div class="relative border-l border-gray-700 pl-8 pb-12">
|
|
{#if i == 0}
|
|
<div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">♦</div>
|
|
{:else}
|
|
<div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">⋄</div>
|
|
{/if}
|
|
<p class="text-sm opacity-70">{entry.duration}</p>
|
|
|
|
<Collapsible open={i==0}>
|
|
<span slot="label" class="text-2lg font-semibold text-red-400 mt-1 focus:outline-none hover:underline transition">{entry.title}</span>
|
|
<span slot="content">{entry.description}</span>
|
|
</Collapsible>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div> |