MinPluto/poke-on-astro-experiment
Archived
1
0
Fork 0
Code Issues Pull requests Activity

Use stream component

Browse source
This commit is contained in:
Korbs 2024-06-28 00:18:00 -04:00
parent fcb165e73e
commit b2ed5701f6
No known key found for this signature in database
1 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/pages/search.astro
View file

@ -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;