78 lines
2.1 KiB
Svelte
78 lines
2.1 KiB
Svelte
<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>
|