Use stream component
This commit is contained in:
parent
fcb165e73e
commit
b2ed5701f6
1 changed files with 12 additions and 10 deletions
|
@ -5,6 +5,7 @@ import Base from '@layouts/Default.astro'
|
||||||
// Components
|
// Components
|
||||||
import Video from '@components/common/VideoItem.astro'
|
import Video from '@components/common/VideoItem.astro'
|
||||||
import Creator from '@components/search/Creator.astro'
|
import Creator from '@components/search/Creator.astro'
|
||||||
|
import Stream from '@components/search/Stream.astro'
|
||||||
|
|
||||||
// Environment Variables
|
// Environment Variables
|
||||||
const DEFAULT_INVIDIOUS_INSTANCE = import.meta.env.DEFAULT_INVIDIOUS_INSTANCE
|
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>
|
<p>Twitch Live streams with the tag "{Query}"</p>
|
||||||
<div class="twitch-channels">
|
<div class="twitch-channels">
|
||||||
{TwitchData.data.relatedChannels.map((channel) =>
|
{TwitchData.data.relatedChannels.map((channel) =>
|
||||||
<a href={'/channel/twitch/' + channel.username} class="channel-stream" data-astro-reload>
|
<Stream
|
||||||
<img class="stream-preview" src={channel.stream.preview}/>
|
Title={channel.stream.title}
|
||||||
<div class="channel-info">
|
Creator={channel.username}
|
||||||
<img src={channel.pfp}/>
|
Avatar={channel.pfp}
|
||||||
<div>
|
Link={'/channel/twitch/' + channel.username}
|
||||||
<h2>{channel.username}</h2>
|
Thumbnail={channel.stream.preview}
|
||||||
<p>{channel.about}</p>
|
View={channel.stream.viewers}
|
||||||
</div>
|
/>
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<p>YouTube Videos</p>
|
<p>YouTube Videos</p>
|
||||||
|
@ -92,6 +91,9 @@ const TwitchData = await TwitchResponse.json()
|
||||||
</Base>
|
</Base>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
body {
|
||||||
|
max-width: 2000px;
|
||||||
|
}
|
||||||
|
|
||||||
.video-grid {
|
.video-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
Reference in a new issue