From 393838e9ad4d15de4ba54547bcc06591a4e0ceab Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Fri, 12 Jul 2024 19:22:59 -0400
Subject: [PATCH] Update how channels are listed in Discover page

---
 src/components/DiscoverChannel.astro | 42 +++++++++++++++++++++++++
 src/pages/discover/tech.astro        | 47 +++++++---------------------
 2 files changed, 53 insertions(+), 36 deletions(-)
 create mode 100644 src/components/DiscoverChannel.astro

diff --git a/src/components/DiscoverChannel.astro b/src/components/DiscoverChannel.astro
new file mode 100644
index 0000000..8ce3b68
--- /dev/null
+++ b/src/components/DiscoverChannel.astro
@@ -0,0 +1,42 @@
+---
+// Properties
+const {
+    ChannelId
+} = Astro.props
+
+// Configuration
+import { DEFAULT_MEDIA_DATA_PROXY, DEFAULT_IMAGE_PROXY} from '@utils/GetConfig'
+
+// Fetch
+const channel = await fetch(DEFAULT_MEDIA_DATA_PROXY + "/api/v1/channels/" + ChannelId).then((response) => response.json());
+---
+
+<a href={'/channel/' + channel.authorId} style={"background: url('" +  DEFAULT_IMAGE_PROXY + '/' + channel.authorThumbnails[0].url} class="discovery-channel">
+    <div class="dc-c">
+        <img src={DEFAULT_IMAGE_PROXY + '/' + channel.authorThumbnails[5].url}/>
+        <p>{channel.author}</p>
+    </div>
+</a>
+<style lang="scss">
+.discovery-channel {
+    text-decoration: none;
+    border-radius: 10px;
+    font-weight: bold;
+    background-position: center !important;
+    background-size: cover !important;
+    .dc-c {
+        border-radius: 10px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        text-align: center;
+        backdrop-filter: blur(24px) contrast(0.7) brightness(0.4);
+        img {
+            width: 24%;
+            align-self: center;
+            border-radius: 10rem;
+            padding: 30px;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/discover/tech.astro b/src/pages/discover/tech.astro
index fbf92ca..4d2cf9e 100644
--- a/src/pages/discover/tech.astro
+++ b/src/pages/discover/tech.astro
@@ -1,28 +1,26 @@
 ---
-import { changeLanguage } from "i18next";
+// Layout
+import Base from "@layouts/Default.astro";
 
-import Discover from "@layouts/Discover.astro";
 // Properties
 const { FetchData, CategoryName, CategoryDescription } = Astro.props;
-// Use on top of Default Layout
-import Base from "@layouts/Default.astro";
+
+// Components
+import DiscoverChannel from '@components/DiscoverChannel.astro'
+
 // Configuration
 import { DEFAULT_MEDIA_DATA_PROXY, DEFAULT_IMAGE_PROXY } from '@utils/GetConfig'
+
 // Discover Data
-import Discover from "../../data/discover.json";
+import DiscoverData from "../../data/discover.json";
 
 
 ---
 
 <Base>
     <div class="video-grid">
-        {Discover.Tech.map((channel) =>
-            <a href={'/channel/' + channel.Link} style={"background: url('" +  DEFAULT_MEDIA_DATA_PROXY + channel.Banner} class="discovery-channel">
-                <div class="dc-c">
-                    <img src={DEFAULT_MEDIA_DATA_PROXY + channel.Logo}/>
-                    <p>{channel.Name}</p>
-                </div>
-            </a>
+        {DiscoverData.Tech.map((channel) =>
+            <DiscoverChannel ChannelId={channel.Id}/>
         )}
     </div>
     <hr/>
@@ -32,27 +30,4 @@ import Discover from "../../data/discover.json";
     </div>
 </Base>
 
-<style is:inline>a[href="/discover/tech"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>
-<style lang="scss">
-.discovery-channel {
-    text-decoration: none;
-    border-radius: 10px;
-    font-weight: bold;
-    background-position: center !important;
-    background-size: cover !important;
-    .dc-c {
-        border-radius: 10px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        text-align: center;
-        backdrop-filter: blur(24px) contrast(0.7) brightness(0.4);
-        img {
-            width: 24%;
-            align-self: center;
-            border-radius: 10rem;
-            padding: 30px;
-        }
-    }
-}
-</style>
\ No newline at end of file
+<style is:inline>a[href="/discover/tech"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>
\ No newline at end of file