Added Notifications

resources/js/Components/FlightsGoneBy/Panels/PanelHeader.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-
+defineProps<{
+    centered?: boolean
+}>()
 </script>
 
 <template>
-<div class="panel-header"><slot /></div>
+<div class="panel-header" :style="`${centered ? 'text-align:center' : ''}`"><slot /></div>
 </template>
 
 <style scoped>

resources/js/Components/FlightsGoneBy/Panels/RegionLegend.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+defineProps<{
+    visitedRegions: Set<string>
+    stateLocalCodes: string[]
+    regionNames?: Record<string, string>
+}>()
+</script>
+
+<template>
+    <div class="legend">
+        <v-chip
+            v-for="state in stateLocalCodes"
+            :key="state"
+            :color="visitedRegions.has(state) ? '#4a90d9' : 'grey'"
+            variant="flat"
+            size="small"
+        >
+            <template #prepend>
+                <v-icon
+                    :icon="visitedRegions.has(state) ? 'mdi-check-circle' : 'mdi-circle-outline'"
+                    size="small"
+                    class="mr-1"
+                />
+            </template>
+            {{ regionNames?.[state] ?? state }}
+        </v-chip>
+    </div>
+</template>
+
+<style scoped>
+.legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    justify-content: center;
+    margin-top: 12px;
+}
+</style>