44 lines
1.7 KiB
Vue
44 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
|
|
import AllianceLogo from "@/Components/FlightsGoneBy/AllianceLogo.vue";
|
|
import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
|
|
import Panel from "@/Components/FlightsGoneBy/Panels/Panel.vue";
|
|
import {Airline} from "@/Types/types";
|
|
import DetailRows from "@/Components/FlightsGoneBy/Panels/DetailRows.vue";
|
|
import DetailRow from "@/Components/FlightsGoneBy/Panels/DetailRow.vue";
|
|
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
|
|
import PanelHeader from "@/Components/FlightsGoneBy/Panels/PanelHeader.vue";
|
|
import PanelSubHeader from "@/Components/FlightsGoneBy/Panels/PanelSubHeader.vue";
|
|
|
|
defineProps<{
|
|
airline: Airline
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<Panel label="Airline">
|
|
<div class="airline-header">
|
|
<AirlineLogo :airline="airline" class="airline-logo" />
|
|
<div>
|
|
<PanelHeader>{{ airline.name }}</PanelHeader>
|
|
<PanelSubHeader v-if="airline.country?.name"><span class="fi" :class="`fi-${airline.country.code.toLowerCase()}`"></span> {{ airline.country.name }}</PanelSubHeader>
|
|
</div>
|
|
</div>
|
|
<DetailRows>
|
|
<DetailRow v-if="airline.alliance?.name" label="Alliance" :value="airline.alliance.name" variant="Alliance" :alliance="airline.alliance" />
|
|
<DetailRow label="IATA" v-if="airline.iata_code" :value="airline.iata_code" variant="Badge" />
|
|
<DetailRow label="ICAO" v-if="airline.iata_code" :value="airline.icao_code" variant="Badge" />
|
|
</DetailRows>
|
|
</Panel>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
.airline-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
</style>
|