Add component for sidebar
This commit is contained in:
parent
3bf8214e6e
commit
a34ab29876
1 changed files with 44 additions and 0 deletions
44
source/src/components/CreatorInSidebar.astro
Executable file
44
source/src/components/CreatorInSidebar.astro
Executable file
|
@ -0,0 +1,44 @@
|
||||||
|
---
|
||||||
|
// Properties
|
||||||
|
const {
|
||||||
|
ChannelId
|
||||||
|
} = Astro.props
|
||||||
|
|
||||||
|
// Configuration
|
||||||
|
import { DEFAULT_MEDIA_DATA_PROXY, DEFAULT_IMAGE_PROXY} from '@utils/GetConfig'
|
||||||
|
|
||||||
|
// Fetch
|
||||||
|
const channel = await fetch(DEFAULT_MEDIA_DATA_PROXY + "/api/v1/channels/" + ChannelId).then((response) => response.json());
|
||||||
|
---
|
||||||
|
|
||||||
|
<a class="sidebar-channel" href={'/channel/' + channel.authorId}>
|
||||||
|
<img src={DEFAULT_IMAGE_PROXY + '/' + channel.authorThumbnails[5].url}/>
|
||||||
|
<p>{channel.author}</p>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.sidebar-channel {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 4px 24px;
|
||||||
|
background: transparent;
|
||||||
|
border: 2px transparent solid;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 14px;
|
||||||
|
font-size: 14px;
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
border: 2px rgba(255, 255, 255, 0.05) solid;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 3rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
Reference in a new issue