113 lines
2.6 KiB
Vue
113 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { usePage } from "@inertiajs/vue3";
|
|
import { computed, ref } from "vue";
|
|
import type { Flight, User, SharedProps } from "@/Types/types";
|
|
import { Link } from "@inertiajs/vue3";
|
|
import FollowButton from "@/Components/FlightsGoneBy/FollowButton.vue";
|
|
|
|
const props = defineProps<{
|
|
user: User
|
|
flightCount?: number
|
|
achievementCount?: number
|
|
followStatus?: string
|
|
show: "flights" | "achievements"
|
|
}>()
|
|
|
|
const counts = computed(() => {
|
|
return {
|
|
flights: props.flightCount ?? 0,
|
|
achievements: props.achievementCount ?? 0,
|
|
} as Record<"flights" | "achievements", number>
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="board-header">
|
|
<div class="board-left">
|
|
<div class="board-title-group">
|
|
<span class="board-eyebrow">FLIGHT HISTORY</span>
|
|
<div class="board-title-row">
|
|
<h1 class="board-title">
|
|
<Link :href="route('profile.view', { user: user.name })">
|
|
{{ user.name }}
|
|
</Link>
|
|
</h1>
|
|
<FollowButton v-if="followStatus !== undefined" :user="user" :followStatus="followStatus" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="board-count">
|
|
<span class="count-number">{{ counts[show] }}</span>
|
|
<span class="count-label">{{show.toUpperCase()}}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.board-header {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
margin-bottom: 2rem;
|
|
border-bottom: 1px solid rgba(255,193,7,0.2);
|
|
padding-bottom: 1.25rem;
|
|
}
|
|
|
|
.board-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.board-eyebrow {
|
|
display: block;
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.2em;
|
|
color: #ffc107;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.board-title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.board-title {
|
|
font-family: 'Barlow Condensed', sans-serif;
|
|
font-size: 2.2rem;
|
|
font-weight: 700;
|
|
color: #f0f2f5;
|
|
letter-spacing: 0.04em;
|
|
line-height: 1;
|
|
margin: 0;
|
|
}
|
|
|
|
.board-header {
|
|
padding: 1em
|
|
}
|
|
|
|
.board-count {
|
|
text-align: right;
|
|
line-height: 1;
|
|
}
|
|
|
|
.count-number {
|
|
display: block;
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 2rem;
|
|
color: #ffc107;
|
|
}
|
|
|
|
.count-label {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.65rem;
|
|
letter-spacing: 0.18em;
|
|
color: #556;
|
|
text-transform: uppercase;
|
|
}
|
|
</style>
|