49 lines
1.5 KiB
Vue
49 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import {Alliance, Country} from "@/Types/types";
|
|
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
|
|
import AllianceLogo from "@/Components/FlightsGoneBy/AllianceLogo.vue";
|
|
import WakeTurbulence from "@/Components/FlightsGoneBy/WakeTurbulence.vue";
|
|
|
|
defineProps<{
|
|
label: string
|
|
value: string | null
|
|
variant?: "Country" | "Badge" | "Alliance" | "WTC"
|
|
country?: Country
|
|
alliance?: Alliance
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="detail-row">
|
|
<span class="detail-key">{{label}}</span>
|
|
<span class="detail-val" v-if="!variant">{{value ?? ''}}</span>
|
|
<span class="detail-val" v-if="variant == 'Badge'"><InlineBadge variant="generic">{{value ?? ''}}</InlineBadge></span>
|
|
<span class="detail-val" v-if="variant == 'Country' && country">{{country.name}} <span :class="`fi fi-${country.code.toLowerCase()}`"></span></span>
|
|
<span class="detail-val" v-if="variant == 'Alliance' && alliance">{{alliance.name}} <AllianceLogo :alliance="alliance"/> </span>
|
|
<span class="detail-val" v-if="variant == 'WTC'"><WakeTurbulence :value="value" /> </span>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.detail-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.detail-key {
|
|
color: var(--muted);
|
|
|
|
}
|
|
|
|
.detail-val {
|
|
color: var(--text);
|
|
text-align: right;
|
|
display:inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5em;
|
|
}
|
|
</style>
|