Piped/src/components/ChannelItem.vue
Jack Linhart a2f76dcd8e
Apply rounded border to channels in search results (#2672)
* Apply rounded border to channels in search results

* use built-in utility class

* Contain channel thumbnail size

* contain results in flexbox and implement custom Uno classes

* correct linter errors

* remove custom rule
2023-07-16 22:27:31 +02:00

35 lines
1.2 KiB
Vue

<template>
<div class="flex flex-col flex-justify-between">
<router-link :to="props.item.url">
<div class="flex justify-center h-[10rem] mb-4">
<img class="aspect-square rounded-full" :src="props.item.thumbnail" loading="lazy" />
</div>
<p>
<span v-text="props.item.name" />
<font-awesome-icon class="ml-1.5" v-if="props.item.verified" icon="check" />
</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" />
<font-awesome-icon class="ml-1.5" v-if="props.item.uploaderVerified" icon="check" />
</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({
item: Object,
});
</script>