feat: add GiftCard and GiftsList components

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>