Create and use new component for creators

src/components/search/Creator.astro

@@ -0,0 +1,59 @@
+---
+const {
+    Name,
+    Avatar,
+    Link,
+    Platform,
+    Banner,
+    Followers
+} = Astro.props
+---
+
+<a href={Link} class={'search-creator'}>
+    <div class="search-creator-media">
+        <p>{Followers}</p>
+        <img class="scm-banner" alt={Name + "'s banner"} src={Banner}/>
+        <img class="scm-avatar" alt={Name + "'s avatar"} src={Avatar}/>
+    </div>
+    <div class="search-creator-meta">
+        <p><strong>{Name}</strong></p>
+    </div>
+</a>
+
+<style lang="scss">
+.search-creator {
+    background: #181818;
+    border-radius: 12px;
+    padding: 4px;
+    text-decoration: none;
+    * {cursor: var(--pointer-cursor) !important}
+    .search-creator-media {
+        position: relative;
+        p {
+            position: absolute;
+            right: 24px;
+            background: black;
+            border-radius: 1rem;
+            padding: 6px 12px;
+        }
+        .scm-banner {
+            aspect-ratio: 16/9;
+            width: 360px;
+            height: 140px;
+            object-fit: cover;
+            border-radius: 12px;
+        }
+        .scm-avatar {
+            position: absolute;
+            left: 12px;
+            bottom: -32px;
+            border-radius: 3rem;
+            border: 2px white solid;
+            width: 80px;
+        }
+    }
+    .search-creator-meta {
+        padding-left: 104px;
+    }
+}
+</style>

src/pages/search.astro

@@ -4,6 +4,7 @@ import Base from '@layouts/Default.astro'
 
 // Components
 import Video from '@components/common/VideoItem.astro'
+import Creator from '@components/search/Creator.astro'
 
 // Environment Variables
 const DEFAULT_INVIDIOUS_INSTANCE = import.meta.env.DEFAULT_INVIDIOUS_INSTANCE
@@ -15,6 +16,10 @@ const InvidiousResponse = await fetch('https://' + DEFAULT_INVIDIOUS_INSTANCE +
 .catch((error) => {
   console.log(error)
 })
+const InvidiousChannelsResponse = await fetch('https://' + DEFAULT_INVIDIOUS_INSTANCE + "/api/v1/search?q=" + Query + '&type=channel')
+.catch((error) => {
+  console.log(error)
+})
 
 const TwitchResponse = await fetch('https://' + DEFAULT_SAFETWITCH_BACKEND + "/api/search/?query=" + Query)
 .catch((error) => {
@@ -22,6 +27,7 @@ const TwitchResponse = await fetch('https://' + DEFAULT_SAFETWITCH_BACKEND + "/a
 })
 
 const InvidiousData = await InvidiousResponse.json()
+const InvidiousChannelsData = await InvidiousChannelsResponse.json()
 const TwitchData = await TwitchResponse.json()
 ---
 
@@ -29,25 +35,36 @@ const TwitchData = await TwitchResponse.json()
     <div class="page-title">
         <h2>Search</h2>
     </div>
-    <p>Twitch Channels related to "{Query}"</p>
+    <p>YouTube creators related to "{Query}"</p>
+    <div class="twitch-channels">
+        {InvidiousChannelsData.map((channel) =>
+            <Creator
+                Name={channel.author}
+                Avatar={channel.authorThumbnails[1].url}
+                Link={'/channel/youtube/' + channel.authorId}
+                Platform="YouTube"
+                Banner={channel.authorThumbnails[1].url}
+                Followers={channel.subCount}
+            />
+        )}
+    </div>
+    <p>Twitch creators related to "{Query}"</p>
     <div class="twitch-channels">
         {TwitchData.data.channels.map((channel) =>
-            <a href={'/channel/twitch/' + channel.username} class="channel">
-                <img id="backgound"src={channel.pfp}/>
-                <div class="tc-info">
-                    <img src={channel.pfp}/>
-                    <div>
-                        <h2>{channel.username}</h2>
-                        <p>{channel.about}</p>
-                    </div>
-                </div>
-            </a>
+            <Creator
+                Name={channel.username}
+                Avatar={channel.pfp}
+                Link={'/channel/twitch/' + channel.username}
+                Platform="Twitch"
+                Banner={channel.pfp}
+                Followers={channel.followers}
+            />
         )}
     </div>
     <p>Twitch Live streams with the tag "{Query}"</p>
     <div class="twitch-channels">
         {TwitchData.data.relatedChannels.map((channel) =>
-            <a href={'/channel/twitch/' + channel.username} class="channel-stream" data-astro-reload
+            <a href={'/channel/twitch/' + channel.username} class="channel-stream" data-astro-reload>
                 <img class="stream-preview" src={channel.stream.preview}/>
                 <div class="channel-info">
                     <img src={channel.pfp}/>