From 9f0ced6e29ae6c41c833f3b4a5e845f3e0bbf950 Mon Sep 17 00:00:00 2001
From: Norbert Maciaszek <norbert@ambiscale.com>
Date: Mon, 17 Nov 2025 20:08:11 +0100
Subject: [PATCH] feat: add GiftCard and GiftsList components

---
 src/lib/components/molecules/GiftCard.svelte  | 48 ++++++++++++++
 src/lib/components/organisms/GiftsList.svelte | 62 +++++++++++++++++++
 src/routes/+page.svelte                       |  4 ++
 3 files changed, 114 insertions(+)
 create mode 100644 src/lib/components/molecules/GiftCard.svelte
 create mode 100644 src/lib/components/organisms/GiftsList.svelte

diff --git a/src/lib/components/molecules/GiftCard.svelte b/src/lib/components/molecules/GiftCard.svelte
new file mode 100644
index 0000000..00fad41
--- /dev/null
+++ b/src/lib/components/molecules/GiftCard.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { formatCurrency } from '$lib/helpers/formatCurrency';
+	import Badge from '../atoms/Badge.svelte';
+	import Heading from '../atoms/Heading.svelte';
+	import { fly } from 'svelte/transition';
+
+	let gift: Gift = $props();
+
+	const bgByStatus = {
+		planned: 'bg-gray-600',
+		decided: 'bg-red-900',
+		bought: 'bg-yellow-800',
+		ready: 'bg-blue-900',
+		wrapped: 'bg-green-900'
+	};
+</script>
+
+<div
+	class={`my-6 rounded-2xl p-4 shadow-sm transition-all duration-200 ease-in-out ${bgByStatus[gift.status]}`}
+	in:fly={{ x: 100 }}
+	out:fly={{ x: -100 }}
+>
+	<div class="flex flex-col gap-2">
+		<div class="flex flex-wrap items-center justify-between gap-2">
+			<div class="flex items-center gap-2">
+				<Heading size="small" spacing="none">
+					{gift.title}
+				</Heading>
+			</div>
+
+			{#if gift.link}
+				<div class="flex flex-wrap items-center gap-2">
+					{#each gift.link.split('\n') as line, index}
+						<a href={line} target="_blank" onclick={(e) => e.stopPropagation()}>
+							<Badge>Link {index + 1}</Badge>
+						</a>
+					{/each}
+				</div>
+			{/if}
+		</div>
+		<div class="flex flex-wrap items-center gap-2">
+			<span>Koszt: {formatCurrency(gift.cost)}</span>
+		</div>
+		{#if gift.description}
+			<p class="text-sm text-gray-200">{gift.description}</p>
+		{/if}
+	</div>
+</div>
diff --git a/src/lib/components/organisms/GiftsList.svelte b/src/lib/components/organisms/GiftsList.svelte
new file mode 100644
index 0000000..1fd37dc
--- /dev/null
+++ b/src/lib/components/organisms/GiftsList.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { flip } from 'svelte/animate';
+	import GiftCard from '../molecules/GiftCard.svelte';
+	import { cubicInOut } from 'svelte/easing';
+
+	type Props = {
+		gifts: Gift[];
+	};
+
+	let { gifts }: Props = $props();
+	let filter = $state<Gift['status'] | 'all'>('all');
+	let sort = $state<keyof Pick<Gift, 'title' | 'cost' | 'person' | 'status'>>('title');
+
+	let sortedGifts = $derived.by(() => {
+		let newSortedGifts = [...gifts];
+		if (sort === 'cost') {
+			newSortedGifts.sort((a, b) => a.cost - b.cost);
+		} else if (sort === 'person') {
+			newSortedGifts.sort((a, b) => a.expand.person.name.localeCompare(b.expand.person.name));
+		} else if (sort === 'status') {
+			newSortedGifts.sort((a, b) => a.status.localeCompare(b.status));
+		}
+		return newSortedGifts;
+	});
+
+	let filteredGifts = $derived.by(() => {
+		if (filter === 'all') return sortedGifts;
+		return sortedGifts.filter((gift) => gift.status === filter);
+	});
+
+	let renderGifts = $derived(filteredGifts);
+</script>
+
+<section>
+	<div class="flex flex-row items-center justify-between gap-4">
+		<select
+			class="rounded-xl border border-gray-300 px-4 py-2 transition-all outline-none focus:border-transparent focus:ring-2 focus:ring-blue-500"
+			bind:value={filter}
+		>
+			<option value="all">Wszystkie</option>
+			<option value="planned">Planowane</option>
+			<option value="decided">Do kupienia</option>
+			<option value="bought">Kupione</option>
+			<option value="wrapped">Gotowe</option>
+		</select>
+		<select
+			class="rounded-xl border border-gray-300 px-4 py-2 transition-all outline-none focus:border-transparent focus:ring-2 focus:ring-blue-500"
+			bind:value={sort}
+		>
+			<option value="title">Tytuł</option>
+			<option value="cost">Koszt</option>
+			<option value="person">Osoba</option>
+			<option value="status">Status</option>
+		</select>
+	</div>
+
+	{#each renderGifts as gift (gift.id)}
+		<div animate:flip={{ duration: 400, easing: cubicInOut }}>
+			<GiftCard {...gift} />
+		</div>
+	{/each}
+</section>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1d750dc..5936ff9 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,8 @@
 <script>
 	import YearOverview from '$lib/components/organisms/YearOverview.svelte';
 	import YearNav from '$lib/components/molecules/YearNav.svelte';
+	import Heading from '$lib/components/atoms/Heading.svelte';
+	import GiftsList from '$lib/components/organisms/GiftsList.svelte';
 
 	let { data } = $props();
 </script>
@@ -8,3 +10,5 @@
 <h1>{data.year.year}</h1>
 <YearOverview heading="Podsumowanie roku" data={data.year} />
 <YearNav years={data.years} />
+<Heading>Prezenty tego roku</Heading>
+<GiftsList gifts={data.year.expand.gifts} />