37 lines
930 B
Vue
37 lines
930 B
Vue
<script setup lang="ts">
|
|
import {Flight} from "@/Types/types";
|
|
import BoardingPass from "@/Components/FlightsGoneBy/BoardingPass.vue";
|
|
import FlightBadge from "@/Components/FlightsGoneBy/FlightBadge.vue";
|
|
import {computed} from "vue";
|
|
|
|
const props = defineProps<{
|
|
flight: Flight
|
|
action: 'flight_departing' | 'flight_arriving'
|
|
}>()
|
|
|
|
const actionText = computed(() => props.action === 'flight_departing' ? 'departed' : 'landed')
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flight-booked">
|
|
<span class="flight-summary">
|
|
Flight <FlightBadge :flight="flight" /> from {{flight.departure_airport.municipality}} to {{flight.arrival_airport.municipality}} has {{actionText}}.
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.flight-booked {
|
|
padding: 0.75rem 1.25rem;
|
|
}
|
|
|
|
.flight-summary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.875rem;
|
|
color: #9ca3af;
|
|
}
|
|
</style>
|