mirror of
https://codeberg.org/SafeTwitch/safetwitch.git
synced 2024-12-22 13:22:58 -05:00
Add channel preview
This commit is contained in:
parent
508c750179
commit
9e8b6031f6
1 changed files with 31 additions and 0 deletions
31
src/components/ChannelPreview.vue
Normal file
31
src/components/ChannelPreview.vue
Normal file
|
@ -0,0 +1,31 @@
|
|||
<script lang="ts">
|
||||
export default {
|
||||
props: {
|
||||
channel: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
return {
|
||||
channelData: props.channel
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-link v-if="channelData" :to="'/' + channelData.username">
|
||||
<div class="p-3 rounded-lg bg-ctp-crust w-max max-w-lg max-h-28">
|
||||
<div class="inline-flex space-x-3">
|
||||
<img :src="channelData.pfp" class="rounded-full w-20">
|
||||
<div>
|
||||
<div class="inline-flex w-full justify-between">
|
||||
<h1 class="text-white text-3xl font-bold">{{ channelData.username }}</h1>
|
||||
<p class="text-white float-right ml-5">{{ channelData.followers }} followers</p>
|
||||
</div>
|
||||
<p class="text-white overflow-y-hidden overflow-ellipsis max-h-12">{{ channelData.about }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</template>
|
Loading…
Reference in a new issue