Add stream component

src/components/search/Stream.astro

@@ -0,0 +1,68 @@
+---
+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;
+            height: 360px;
+            object-fit: cover;
+            border-radius: 12px;
+        }
+    }
+    .search-stream-meta {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        p {
+            // Truncate
+            max-width: 530px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: inherit;
+        }
+        img {
+            width: 64px;
+            height: 64px;
+            border-radius: 3rem;
+        }
+    }
+}
+</style>