Use stream component

src/pages/search.astro

@@ -5,6 +5,7 @@ import Base from '@layouts/Default.astro'
 // Components
 import Video from '@components/common/VideoItem.astro'
 import Creator from '@components/search/Creator.astro'
+import Stream from '@components/search/Stream.astro'
 
 // Environment Variables
 const DEFAULT_INVIDIOUS_INSTANCE = import.meta.env.DEFAULT_INVIDIOUS_INSTANCE
@@ -64,16 +65,14 @@ const TwitchData = await TwitchResponse.json()
     <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>
-                <img class="stream-preview" src={channel.stream.preview}/>
-                <div class="channel-info">
-                    <img src={channel.pfp}/>
-                    <div>
-                        <h2>{channel.username}</h2>
-                        <p>{channel.about}</p>
-                    </div>
-                </div>
-            </a>
+            <Stream
+                Title={channel.stream.title}
+                Creator={channel.username}
+                Avatar={channel.pfp}
+                Link={'/channel/twitch/' + channel.username}
+                Thumbnail={channel.stream.preview}
+                View={channel.stream.viewers}
+            />
         )}
     </div>
     <p>YouTube Videos</p>
@@ -92,6 +91,9 @@ const TwitchData = await TwitchResponse.json()
 </Base>
 
 <style>
+body {
+    max-width: 2000px;
+}
 
 .video-grid {
     display: grid;