b8906efc80
Some checks failed
ci / ci (22, ubuntu-latest) (push) Has been cancelled
Nuxt 4 + Supabase + Flightics API. Incluye búsqueda de vuelos, inspiraciones, watchlist, tracking de precios y mapa interactivo. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
58 lines
1.8 KiB
Vue
58 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import type { InspirationItem } from '~/server/utils/flightics'
|
|
|
|
defineProps<{
|
|
items: InspirationItem[]
|
|
from: string
|
|
loading: boolean
|
|
}>()
|
|
|
|
defineEmits<{ select: [iata: string] }>()
|
|
|
|
const budget = ref(100)
|
|
</script>
|
|
|
|
<template>
|
|
<UCard>
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="font-semibold">Donde por {{ budget }}€?</h3>
|
|
<UBadge
|
|
:label="`${items.filter(i => i.minPrice <= budget).length} destinos`"
|
|
color="primary"
|
|
size="xs"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="mb-4">
|
|
<URange v-model="budget" :min="15" :max="500" :step="5" />
|
|
</div>
|
|
|
|
<div v-if="loading" class="grid grid-cols-2 md:grid-cols-3 gap-2">
|
|
<USkeleton v-for="i in 6" :key="i" class="h-12" />
|
|
</div>
|
|
|
|
<div v-else class="grid grid-cols-2 md:grid-cols-3 gap-2">
|
|
<button
|
|
v-for="item in items.filter(i => i.minPrice <= budget).slice(0, 12)"
|
|
:key="item.to[0]"
|
|
class="flex items-center justify-between px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-700 hover:border-primary-400 transition-colors text-left text-sm"
|
|
@click="$emit('select', item.to[0])"
|
|
>
|
|
<span>
|
|
<span class="font-semibold">{{ from }} → {{ item.to[0] }}</span>
|
|
<span v-if="item.minStops === 0" class="text-xs text-muted ml-1">directo</span>
|
|
</span>
|
|
<span class="font-bold text-primary-600 dark:text-primary-400">
|
|
{{ item.minPrice.toFixed(0) }}€
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="items.filter(i => i.minPrice <= budget).length === 0 && !loading" class="text-center py-4 text-sm text-muted">
|
|
Sube el presupuesto para ver destinos
|
|
</div>
|
|
</UCard>
|
|
</template>
|