Piped/src/components/ChannelItem.vue

38 lines
1.3 KiB
Vue
Raw Normal View History

2022-11-01 12:12:54 +00:00
<template>
<div class="flex flex-col flex-justify-between">
2022-11-01 12:12:54 +00:00
<router-link :to="props.item.url">
<div class="my-4 flex justify-center">
<img loading="lazy" class="aspect-square w-[50%] rounded-full" :src="props.item.thumbnail" />
2022-11-01 12:12:54 +00:00
</div>
<p>
<span v-text="props.item.name" />
2023-07-27 11:46:05 +00:00
<font-awesome-icon v-if="props.item.verified" class="ml-1.5" icon="check" />
2022-11-01 12:12:54 +00:00
</p>
</router-link>
<p v-if="props.item.description" v-text="props.item.description" />
<router-link v-if="props.item.uploaderUrl" class="link" :to="props.item.uploaderUrl">
<p>
<span v-text="props.item.uploader" />
2023-07-27 11:46:05 +00:00
<font-awesome-icon v-if="props.item.uploaderVerified" class="ml-1.5" icon="check" />
2022-11-01 12:12:54 +00:00
</p>
</router-link>
<a v-if="props.item.uploaderName" class="link" v-text="props.item.uploaderName" />
<template v-if="props.item.videos >= 0">
<br v-if="props.item.uploaderName" />
<strong v-text="`${props.item.videos} ${$t('video.videos')}`" />
</template>
<br />
</div>
</template>
<script setup>
const props = defineProps({
2023-07-27 11:46:05 +00:00
item: {
type: Object,
required: true,
},
2022-11-01 12:12:54 +00:00
});
</script>