MinPluto/MinPluto-Frontend
MinPluto/MinPluto-Frontend
Archived
1
Fork 0
Code Issues Pull requests Activity

Add search components for Streams

Browse source
This commit is contained in:
Korbs 2024-07-12 23:33:58 -04:00
parent f7394b86b2
commit 52c889bb21
2 changed files with 147 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
src/components/search/Creator.astro Normal file
View file

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

69
src/components/search/Stream.astro Normal file
View file

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