76 lines
No EOL
1.8 KiB
Text
76 lines
No EOL
1.8 KiB
Text
---
|
|
// Properties
|
|
const {
|
|
VideoId,
|
|
CreatorId,
|
|
Title,
|
|
Thumbnail,
|
|
Date,
|
|
Views,
|
|
Length,
|
|
Platform
|
|
} = Astro.props
|
|
|
|
// Components
|
|
import { Image } from 'astro:assets';
|
|
---
|
|
|
|
<a href={"/watch?v=" + VideoId} class="fl-vi">
|
|
<div class="fl-vi-thumbnail">
|
|
<Image src={Thumbnail} alt={'Thumbnail'} inferSize={true} loading="eagerly" format="webp"/>
|
|
<!-- <p>{Platform}</p> -->
|
|
<p>{Length}</p>
|
|
</div>
|
|
<div class="fl-vi-content">
|
|
<Image src={'https://image.proxy.sudovanilla.org/https://invidious.private.coffee/ggpht/ytc/AIdro_lAKf-vZLoTI-gZUoP5Y3gbdGd07E4eDHUhTee6aOzDCnU=s900-c-k-c0x00ffffff-no-rj'} alt={'Creator Avatar'} inferSize={true} loading="lazy" format="webp"/>
|
|
<div>
|
|
<p><strong>{Title}</strong></p>
|
|
<span>{Date} - {Views}</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<style lang="scss">
|
|
.fl-vi {
|
|
color: white;
|
|
text-decoration: none;
|
|
.fl-vi-thumbnail {
|
|
position: relative;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 6px;
|
|
}
|
|
p {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
right: 12px;
|
|
background: rgba(0,0,0,0.8);
|
|
border-radius: 3rem;
|
|
padding: 6px 12px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
.fl-vi-content {
|
|
display: flex;
|
|
gap: 12px;
|
|
* {margin: 0px;}
|
|
img {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 3rem;
|
|
}
|
|
strong {
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
white-space: wrap;
|
|
text-overflow: ellipsis;
|
|
display: inline-grid;
|
|
}
|
|
span {
|
|
font-size: 14px;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
</style> |