Added Notifications

resources/js/Components/FlightsGoneBy/ProfileHeader.vue

@@ -9,6 +9,7 @@ const props = defineProps<{
     flightCount?: number
     achievementCount?: number
     isFollowing?: boolean
+    show: "flights" | "achievements"
 }>()
 
 const auth = usePage<SharedProps>().props.auth
@@ -20,6 +21,13 @@ const processing = ref(false)
 const snackbar = ref(false)
 const snackbarMessage = ref('')
 
+const counts = computed(() => {
+    return {
+        flights: props.flightCount ?? 0,
+        achievements: props.achievementCount ?? 0,
+    } as Record<"flights" | "achievements", number>
+})
+
 const follow = async () => {
     processing.value = true
     const response = await fetch(route('profile.follow', { user: props.user.name }), {
@@ -61,8 +69,8 @@ const follow = async () => {
         </div>
 
         <div class="board-count">
-            <span class="count-number">{{ flightCount ?? achievementCount }}</span>
-            <span class="count-label">{{achievementCount ? 'Achievements' : 'Flights'}}</span>
+            <span class="count-number">{{ counts[show] }}</span>
+            <span class="count-label">{{show.toUpperCase()}}</span>
         </div>
     </div>
 
@@ -114,6 +122,12 @@ const follow = async () => {
     margin: 0;
 }
 
+@media (max-width: 768px) {
+    .board-header {
+        padding: 1em
+    }
+}
+
 .follow-btn {
     font-family: 'Share Tech Mono', monospace;
     font-size: 0.75rem;