From 52c889bb212befca0940e2d15b4e7794fdfda910 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Fri, 12 Jul 2024 23:33:58 -0400
Subject: [PATCH] Add search components for Streams

---
 src/components/search/Creator.astro | 78 +++++++++++++++++++++++++++++
 src/components/search/Stream.astro  | 69 +++++++++++++++++++++++++
 2 files changed, 147 insertions(+)
 create mode 100644 src/components/search/Creator.astro
 create mode 100644 src/components/search/Stream.astro

diff --git a/src/components/search/Creator.astro b/src/components/search/Creator.astro
new file mode 100644
index 0000000..9afa72e
--- /dev/null
+++ b/src/components/search/Creator.astro
@@ -0,0 +1,78 @@
+---
+const {
+    Name,
+    Avatar,
+    Link,
+    Platform,
+    Banner,
+    Followers
+} = Astro.props
+---
+
+<a href={Link} class={'search-creator'}>
+    <div class="search-creator-media">
+        <p>
+            { 
+            ()=> {
+              if (Platform === "YouTube") {
+                return <span>Subs: </span>
+              } else if (Platform === "Twitch") {
+                return <span>Followers: </span>
+              }
+            }
+          }
+          {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;
+        p {
+            // Truncate
+            max-width: 250px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: inherit;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/search/Stream.astro b/src/components/search/Stream.astro
new file mode 100644
index 0000000..6fe6264
--- /dev/null
+++ b/src/components/search/Stream.astro
@@ -0,0 +1,69 @@
+---
+const {
+    Title,
+    Creator,
+    Avatar,
+    Link,
+    Thumbnail,
+    Views
+} = Astro.props
+---
+
+<a href={Link} class='search-stream search-stream-platfom-twitch'>
+    <div class="search-stream-media">
+        <!-- <p>{Views}</p> -->
+        <img class="ssm-banner" alt='Stream Thumbnail' src={Thumbnail}/>
+    </div>
+    <div class="search-stream-meta">
+        <img alt={Creator + "'s avatar"} src={Avatar}/>
+        <div>
+            <p><strong>{Title}</strong></p>
+            <p>{Creator}</p>
+        </div>
+    </div>
+</a>
+
+<style lang="scss">
+.search-stream {
+    background: #181818;
+    border-radius: 12px;
+    padding: 4px;
+    text-decoration: none;
+    * {cursor: var(--pointer-cursor) !important}
+    .search-stream-media {
+        position: relative;
+        p {
+            position: absolute;
+            right: 24px;
+            background: black;
+            border-radius: 1rem;
+            padding: 6px 12px;
+        }
+        .ssm-banner {
+            aspect-ratio: 16/9;
+            width: 100%;
+            object-fit: cover;
+            border-radius: 12px;
+        }
+    }
+    .search-stream-meta {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        p {
+            margin: 6px 0px;
+            // Truncate
+            max-width: 250px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: inherit;
+        }
+        img {
+            width: 42px;
+            height: 42px;
+            border-radius: 3rem;
+        }
+    }
+}
+</style>
\ No newline at end of file