76 lines
1.4 KiB
Vue
76 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import MainLayout from "@/Layouts/MainLayout.vue";
|
|
import {User, UserAction} from "@/Types/types";
|
|
import { Head } from "@inertiajs/vue3";
|
|
import FeedItem from "@/Components/FlightsGoneBy/Feed/FeedItem.vue";
|
|
|
|
defineOptions({ layout: MainLayout })
|
|
|
|
const props = defineProps<{
|
|
user: User
|
|
feed: UserAction[]
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Feed" />
|
|
|
|
<div class="feed-page">
|
|
<header class="feed-header">
|
|
<h1>Feed</h1>
|
|
<span class="feed-count">{{ feed.length }} updates</span>
|
|
</header>
|
|
|
|
<div v-if="feed.length === 0" class="empty">
|
|
<p>Nothing here yet — follow someone to see their flight updates!</p>
|
|
</div>
|
|
|
|
<div class="feed-list">
|
|
<FeedItem v-for="action in feed" :key="action.id" :action="action" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.feed-page {
|
|
margin: 0 auto;
|
|
padding: 2rem 1rem;
|
|
width: 55%;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.feed-page {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.feed-header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.feed-header h1 {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
}
|
|
|
|
.feed-count {
|
|
font-size: 0.85rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.empty p {
|
|
text-align: center;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.feed-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
}
|
|
</style>
|