66 lines
2.1 KiB
Vue
66 lines
2.1 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;
|
|
}
|
|
|
|
.airline-logo-placeholder {
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 8px;
|
|
background: var(--accent-glow);
|
|
border: 1px solid rgba(56, 189, 248, 0.2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.75rem;
|
|
font-family: 'Share Tech Mono', monospace;
|
|
color: var(--accent);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.airline-name {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
</style>
|