Updated Map View

resources/js/Components/FlightsGoneBy/AircraftToolTip.vue

@@ -4,6 +4,11 @@ import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
 import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
 import WakeTurbulence from "@/Components/FlightsGoneBy/WakeTurbulence.vue";
 import LiveryImage from "@/Components/FlightsGoneBy/LiveryImage.vue";
+import ToolTipDivider from "@/Components/FlightsGoneBy/Tooltips/ToolTipDivider.vue";
+import ToolTipRows from "@/Components/FlightsGoneBy/Tooltips/ToolTipRows.vue";
+import ToolTipRow from "@/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue";
+import ToolTipName from "@/Components/FlightsGoneBy/Tooltips/ToolTipName.vue";
+import ToolTipHeader from "@/Components/FlightsGoneBy/Tooltips/ToolTipHeader.vue";
 
 defineProps<{
     aircraft: Aircraft
@@ -26,99 +31,36 @@ function formatEngineType(type: string): string {
             </div>
         </template>
 
-        <div class="tooltip-header">
-            <span class="designator">{{ aircraft.manufacturer_code }} {{ aircraft.model_full_name }}</span>
+        <ToolTipHeader>
+            {{ aircraft.manufacturer_code }} {{ aircraft.model_full_name }}
+        </ToolTipHeader>
 
-        </div>
-
-        <div class="tooltip-name">
+        <ToolTipName>
             <InlineBadge variant="generic">
                 {{aircraft.designator }}
             </InlineBadge>
             <InlineBadge variant="generic">
                 <WakeTurbulence :value="aircraft.wtc" />
             </InlineBadge>
-        </div>
+        </ToolTipName>
 
-        <div class="tooltip-divider" />
+        <ToolTipDivider/>
 
-        <div class="tooltip-rows">
-            <div class="tooltip-row">
-                <span class="tooltip-label">Engines</span>
-                <span class="tooltip-value">{{ aircraft.engine_count }}x {{ formatEngineType(aircraft.engine_type) }}</span>
-            </div>
-        </div>
+        <ToolTipRows>
+            <ToolTipRow label="Engines" :value="aircraft.engine_count + 'x ' + formatEngineType(aircraft.engine_type)" />
+        </ToolTipRows>
 
-        <div class="tooltip-divider" v-if="flight?.livery_url" />
-        <div class="tooltip-rows" v-if="flight?.livery_url">
+        <ToolTipDivider v-if="flight?.livery_url" />
+        <ToolTipRows v-if="flight?.livery_url">
             <LiveryImage :flight="flight" />
-        </div>
-        <div class="tooltip-divider" v-if="flight?.aircraft_registration" />
-        <div class="tooltip-rows" v-if="flight?.aircraft_registration">
-            <div class="tooltip-row">
-                <span class="tooltip-label">Registration</span>
-                <span class="tooltip-value">{{ flight.aircraft_registration}}</span>
-            </div>
-        </div>
+        </ToolTipRows>
+        <ToolTipDivider v-if="flight?.aircraft_registration" />
+        <ToolTipRows v-if="flight?.aircraft_registration">
+            <ToolTipRow label="Registration" :value="flight.aircraft_registration" />
+        </ToolTipRows>
     </GlassTooltip>
 </template>
 
 <style scoped>
-.tooltip-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.75rem;
-}
 
-.designator {
-    color: #e8eaf0;
-    letter-spacing: 0.06em;
-    line-height: 1;
-}
-
-.badges {
-    display: flex;
-    gap: 0.3rem;
-}
-
-.tooltip-name {
-    display:flex;
-    gap: 4px;
-    margin-top: 0.2rem;
-    line-height: 1.3;
-}
-
-
-.tooltip-divider {
-    height: 1px;
-    background: var(--table-border, rgba(255,255,255,0.08));
-}
-
-.tooltip-rows {
-    display: flex;
-    flex-direction: column;
-    gap: 0.3rem;
-}
-
-.tooltip-row {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 1rem;
-}
-
-.tooltip-label {
-    font-family: 'Share Tech Mono', monospace;
-    font-size: 0.6rem;
-    letter-spacing: 0.15em;
-    color: var(--muted, #445566);
-    flex-shrink: 0;
-}
-
-.tooltip-value {
-    font-size: 0.78rem;
-    color: var(--text, #c8cdd8);
-    text-align: right;
-}
 </style>