From c9a44c2c743704f9a89ca7bf8fdef27200d761e6 Mon Sep 17 00:00:00 2001
From: Rasel Shikdar <imrasel597@gmail.com>
Date: Sat, 5 Oct 2024 18:39:53 +0600
Subject: [PATCH] Update EmbedList.vue

---
 components/content/EmbedList.vue | 40 +++++++++++++-------------------
 1 file changed, 16 insertions(+), 24 deletions(-)

diff --git a/components/content/EmbedList.vue b/components/content/EmbedList.vue
index c9f7a33..34a3523 100644
--- a/components/content/EmbedList.vue
+++ b/components/content/EmbedList.vue
@@ -1,38 +1,30 @@
 <script lang="ts" setup>
 import EmbedCard from '../EmbedCard.vue'
+import { useEmbeds } from '~/composables/content'
 
-// Mock data fetching, replace this with your actual data fetching logic
-const categories = ref([
-  {
-    name: 'Media Embeds',
-    embeds: [
-      { title: 'Sample YouTube Video', url: 'https://www.youtube.com/watch?v=abc123' },
-      { title: 'Sample Facebook Video', url: 'https://www.facebook.com/watch?v=xyz456' },
-      { title: 'Sample m3u8 Stream', url: 'https://example.com/stream.m3u8' },
-    ],
-  },
-  // Add more categories as needed
-])
+// Fetching embed data
+const { data: embeds } = await useEmbeds()
 </script>
 
 <template>
-  <div class="space-y-10">
-    <div v-for="(category, cKey) in categories" :key="cKey">
-      <h2 class="text-2xl font-bold">{{ category.name }}</h2>
-      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-        <EmbedCard
-          v-for="(embed, eKey) in category.embeds"
-          :key="eKey"
-          :embed="embed"
-        />
+  <div class="embed-list space-y-10">
+    <div v-if="embeds && embeds.body.length">
+      <h2 class="text-2xl font-bold">Embeds</h2>
+      <div v-for="(embed, index) in embeds.body" :key="index">
+        <EmbedCard :embed="embed" />
       </div>
     </div>
+    <div v-else>
+      <p>No embeds available.</p>
+    </div>
   </div>
 </template>
 
 <style scoped>
-.grid {
-  display: grid;
-  gap: 1.5rem;
+.embed-list {
+  padding: 2rem;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  background-color: #f9f9f9;
 }
 </style>