Initial Commit

resources/js/components/dredge/Feed/Feed.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import type { Post } from '@/types/dredge.types';
+import PostCard from './PostCard.vue';
+
+const posts = ref<Post[]>([]);
+const loading = ref(true);
+const error = ref<string | null>(null);
+
+async function fetchPosts() {
+    loading.value = true;
+    error.value = null;
+
+    try {
+        const response = await fetch('/api/posts');
+
+        if (!response.ok) {
+            throw new Error('Failed to load posts');
+        }
+
+        posts.value = await response.json();
+    } catch (e) {
+        error.value = 'Could not load your feed. Please try again.';
+    } finally {
+        loading.value = false;
+    }
+}
+
+function onLike(id: string) {
+    console.log('like', id);
+}
+
+onMounted(fetchPosts);
+</script>
+
+<template>
+    <section class="feed" >
+        <p v-if="loading">Loading your feed…</p>
+        <p v-else-if="error" role="alert">{{ error }}</p>
+        <p v-else-if="posts.length === 0">No posts to show yet.</p>
+
+        <PostCard
+            v-for="post in posts"
+            v-else
+            :key="post.id"
+            :post="post"
+        />
+    </section>
+</template>
+
+<style scoped>
+.feed {
+    display: flex;
+    flex-direction: column;
+    gap: 1.75rem;
+}
+</style>