Corrected Korea

2026-04-09 11:20:16 +10:00
parent 43f5c8ac3e
commit 7a07616f03
19 changed files with 1530 additions and 399 deletions
@@ -1,103 +1,26 @@
 <script setup lang="ts">
-import {FlightClass} from "@/Types/types";
+import {Flight} from "@/Types/types";
+import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";

-defineProps<{
-  flightClass: FlightClass | null
+const props = defineProps<{
+    flight: Flight
 }>();
+
+type BadgeVariant = 'first' | 'business' | 'premium' | 'economy' | 'private' | 'unspecified';
+
+function classVariant(name?: string | null): BadgeVariant {
+    const n = name?.toLowerCase() ?? '';
+    if (n.includes('private'))  return 'private';
+    if (n.includes('first'))    return 'first';
+    if (n.includes('business')) return 'business';
+    if (n.includes('premium'))  return 'premium';
+    if (n.includes('economy'))  return 'economy';
+    return 'unspecified';
+}
 </script>

 <template>
-  <span
-    class="class-badge"
-    :class="{
-      'class-first': flightClass?.name?.toLowerCase().includes('first'),
-      'class-business': flightClass?.name?.toLowerCase().includes('business'),
-      'class-premium': flightClass?.name?.toLowerCase().includes('premium'),
-      'class-economy': flightClass?.name?.toLowerCase().includes('economy') && !flightClass?.name?.toLowerCase().includes('premium'),
-      'class-private': flightClass?.name?.toLowerCase().includes('private'),
-      'class-unspecified': flightClass?.name?.toLowerCase().includes('unspecified'),
-    }"
-  >
-    {{ flightClass?.name ?? '—' }}
-  </span>
+    <InlineBadge :variant="classVariant(flight.flight_class?.name)">
+        {{ flight.flight_class?.name }}
+    </InlineBadge>
 </template>
-
-<style scoped>
-.class-badge {
-  display: inline-block;
-  font-family: 'Share Tech Mono', monospace;
-  font-size: 0.68rem;
-  letter-spacing: 0.1em;
-  padding: 0.18rem 0.55rem;
-  border-radius: 2px;
-  text-transform: uppercase;
-}
-
-.class-first {
-  background: rgba(255, 193, 7, 0.15);
-  color: #ffc107;
-  border: 1px solid rgba(255, 193, 7, 0.3);
-}
-
-.class-business {
-  background: rgba(100, 180, 255, 0.1);
-  color: #64b4ff;
-  border: 1px solid rgba(100, 180, 255, 0.25);
-}
-
-.class-premium {
-  background: rgb(75, 32, 137, 0.1);
-  color: #c49dff;
-  border: 1px solid rgba(180, 130, 255, 0.25);
-}
-
-.class-economy {
-  background: rgba(255, 255, 255, 0.05);
-  color: #778;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.class-unspecified {
-  display: none;
-  background: transparent;
-  color: #778;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.class-private {
-  background: linear-gradient(
-    135deg,
-    rgba(255, 160, 0, 0.2) 0%,
-    rgba(255, 220, 80, 0.3) 45%,
-    rgba(255, 160, 0, 0.15) 100%
-  );
-  color: #ffc107;
-  border: 1px solid rgba(255, 193, 7, 0.4);
-  text-shadow: 0 0 8px rgba(255, 193, 7, 0.6);
-  position: relative;
-  overflow: hidden;
-}
-
-.class-private::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    105deg,
-    transparent 40%,
-    rgba(255, 220, 100, 0.45) 50%,
-    transparent 60%
-  );
-  background-size: 200% 100%;
-  animation: shimmer 2.8s ease-in-out infinite;
-}
-
-@keyframes shimmer {
-  0% {
-    background-position: 200% center;
-  }
-  100% {
-    background-position: -200% center;
-  }
-}
-</style>