Updated Map View

resources/js/Components/FlightsGoneBy/AirlineLogo.vue

@@ -5,6 +5,11 @@ import {usePage} from "@inertiajs/vue3";
 import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
 import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
 import AllianceLogo from "@/Components/FlightsGoneBy/AllianceLogo.vue";
+import ToolTipHeader from "@/Components/FlightsGoneBy/Tooltips/ToolTipHeader.vue";
+import ToolTipDivider from "@/Components/FlightsGoneBy/Tooltips/ToolTipDivider.vue";
+import ToolTipName from "@/Components/FlightsGoneBy/Tooltips/ToolTipName.vue";
+import ToolTipRows from "@/Components/FlightsGoneBy/Tooltips/ToolTipRows.vue";
+import ToolTipRow from "@/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue";
 
 const page = usePage<SharedProps>().props;
 
@@ -33,26 +38,21 @@ const size = computed(() => props.size ? props.size + 'px' : '30px');
         </template>
 
         <div class="airline-tooltip-content">
-            <div class="tooltip-header">
+            <ToolTipHeader>
                 <div class="logo-title">
                     <span class="airline-logo-tooltip" :style="logoStyle"></span>
                     <span class="airline-name">{{ airline.name }}</span>
                 </div>
-                <div v-if="airline.iata_code || airline.icao_code" class="codes">
+            </ToolTipHeader>
+            <ToolTipName v-if="airline.iata_code || airline.icao_code">
                     <InlineBadge v-if="airline.iata_code" variant="generic">{{ airline.iata_code }}</InlineBadge>
                     <InlineBadge v-if="airline.icao_code" variant="generic">{{ airline.icao_code }}</InlineBadge>
                     <AllianceLogo v-if="airline?.alliance" :alliance="airline?.alliance" size="24" />
-                </div>
-            </div>
-            <div class="tooltip-divider"></div>
-            <div class="tooltip-meta">
-                <span
-                    v-if="airline.country"
-                    :class="`fi fi-${airline.country.code.toLowerCase()}`"
-                    class="country-flag"
-                ></span>
-                <span v-if="airline.country" class="country-name">{{ airline.country.name }}</span>
-            </div>
+            </ToolTipName>
+           <ToolTipDivider />
+            <ToolTipRows v-if="airline.country">
+                <ToolTipRow label="Country" :value="airline.country.name" :countryCode="airline.country.code" />
+            </ToolTipRows>
         </div>
     </GlassTooltip>
     <span v-else class="airline-logo"></span>
@@ -77,45 +77,4 @@ span.airline-logo {
     align-items: center;
     gap: 10px;
 }
-
-.codes{
-    width:100%;
-    display: flex;
-    gap: 4px;
-    padding-top:1em;
-    justify-content:flex-start;
-}
-
-
-.airline-name {
-    letter-spacing: 0.03em;
-}
-
-.tooltip-divider {
-    height: 1px;
-    background: var(--table-border);
-}
-
-.tooltip-meta {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    color: var(--muted);
-}
-
-.country-flag {
-    font-size: 1rem;
-}
-
-.country-name {
-    flex: 1;
-    font-size: 0.8rem;
-}
-
-.codes {
-    display: flex;
-    gap: 4px;
-    margin-left: auto;
-}
-
 </style>