luke-else/luke-else.co.uk
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

FEAT: #36 Added in Collapsible.svelte re-usable component.

Browse Source
This commit is contained in:
Luke Else
2025-05-27 00:01:54 +01:00
parent 005dfb6929
commit 9b49710556
4 changed files with 51 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/lib/components/Cards/Card.svelte
View File

@@ -9,13 +9,13 @@
<slot name="headerLeft" class="text-2xl md:text-3xl truncate"></slot>
<slot name="headerRight" class="max-md:hidden text-xl md:text-2xl truncate"></slot>
</div>
<hr class="mb-4 border-1" />
<div class="flex-1 flex flex-col justify-center p-5">
<hr class="border-1" />
<div class="flex-1 flex flex-col justify-center mt-4 mb-8">
<slot name="content"/>
</div>
<hr class="my-4 border-1" />
<div class="flex flex-row justify-between items-center mt-2 text-base opacity-90">
<hr class="border-1" />
<div class="flex flex-row justify-between items-center mt-4 text-base opacity-90">
<slot name="footerLeft"/>
<slot name="footerRight"/>
</div>

33
src/lib/components/Collapsible.svelte Normal file
View File

@@ -0,0 +1,33 @@
<script lang="ts">
export let open = false;
</script>
<div class="w-full">
<button
type="button"
class="flex items-center justify-between w-full px-2 py-2 text-left rounded hover:font-bold transition group"
on:click={() => open = !open}
aria-expanded={open}
>
<span><slot name="label"/></span>
<svg
class="w-5 h-5 ml-2 transition-transform duration-200"
style="transform: rotate({open ? 90 : 0}deg)"
fill="none"
stroke="currentColor"
stroke-width="2"
viewBox="0 0 24 24"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</button>
<div
class="overflow-hidden transition-all duration-300"
style="max-height: {open ? '1000px' : '0'}"
aria-hidden={!open}
>
<div class="pt-2">
<slot name="content"/>
</div>
</div>
</div>

28
src/lib/components/Timeline.svelte
View File

@@ -1,40 +1,28 @@
<script lang="ts">
import Collapsible from "./Collapsible.svelte";
export let timelineData: Array<{
title: string;
description: string;
duration: string;
}>;
// Track open/closed state for each entry
let openStates = timelineData.map(() => false);
function toggle(index: number) {
openStates[index] = !openStates[index];
}
toggle(0); // Open the first entry by default
</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 openStates[i]}
{#if i == 0}
<div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">&diams;</div>
{:else}
<div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">&diam;</div>
{/if}
<p class="text-sm opacity-70">{entry.duration}</p>
<button
class="text-2lg font-semibold text-red-400 mt-1 focus:outline-none hover:underline transition"
on:click={() => toggle(i)}
aria-expanded={openStates[i]}
>
<h3 class="text-2lg font-semibold text-red-400 mt-1">{entry.title}</h3>
</button>
{#if openStates[i]}
<p class="mt-2 whitespace-pre-line transition-all duration-300">{@html entry.description}</p>
{/if}
<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>