stashing code

apps/frontend/src/lib/components/organisms/deals-grid.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { ArrowRight, Plane } from "@lucide/svelte";
+	import Card from "$lib/components/ui/card/card.svelte";
+	import CardContent from "$lib/components/ui/card/card-content.svelte";
+
+	let { deals } = $props();
+</script>
+
+<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
+	{#each deals as deal}
+		<Card class="card-hover overflow-hidden">
+			<CardContent class="p-5">
+				{#if deal.tag}
+					<div class="mb-3">
+						<span
+							class="rounded-full bg-brand-500 px-3 py-1 text-xs font-medium text-white"
+						>
+							{deal.tag}
+						</span>
+					</div>
+				{/if}
+
+				<div class="mb-3 flex items-center justify-between">
+					<div class="flex items-center">
+						<Plane class="mr-2 h-5 w-5 text-brand-500" />
+						<span class="font-medium">{deal.airline}</span>
+					</div>
+
+					{#if deal.discount}
+						<span
+							class="rounded bg-brand-100 px-2 py-1 text-xs font-medium text-brand-600"
+						>
+							{deal.discount}% OFF
+						</span>
+					{/if}
+				</div>
+
+				<div class="mb-4 flex items-center justify-between">
+					<div>
+						<p class="text-xl font-bold">{deal.from}</p>
+						<p class="text-sm text-muted-foreground">Departure</p>
+					</div>
+
+					<div class="flex-1 px-4">
+						<div class="relative">
+							<div
+								class="absolute left-0 right-0 top-1/2 -translate-y-1/2 transform border-t border-dashed border-gray-300"
+							></div>
+							<div
+								class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform bg-white p-1"
+							>
+								<ArrowRight class="h-4 w-4 text-brand-500" />
+							</div>
+						</div>
+					</div>
+
+					<div class="text-right">
+						<p class="text-xl font-bold">{deal.to}</p>
+						<p class="text-sm text-muted-foreground">Arrival</p>
+					</div>
+				</div>
+
+				<div class="flex items-end justify-between">
+					<div>
+						<p class="text-sm text-muted-foreground">{deal.date}</p>
+					</div>
+					<div>
+						<p class="text-sm">from</p>
+						<p class="text-2xl font-bold text-brand-600">
+							${deal.price}
+						</p>
+					</div>
+				</div>
+			</CardContent>
+		</Card>
+	{/each}
+</div>