Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2026-03-28 11:26:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate to tailwind + reka ui

Browse Source
This commit is contained in:
Kavin
2026-03-27 11:43:13 +05:30
parent 9d0da61e34
commit d1ef96e7d4
54 changed files with 2206 additions and 1926 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/ChannelItem.vue
View File

@@ -1,38 +1,53 @@
<template>
<div class="flex flex-col flex-justify-between">
<router-link :to="item.url" class="link font-bold">
<div class="flex flex-col justify-between">
<router-link
:to="item.url"
class="font-bold hover:text-red-500 focus:text-red-500 dark:hover:text-red-400 dark:focus:text-red-400"
>
<div class="my-4 flex justify-center">
<img loading="lazy" class="aspect-square w-[50%] rounded-full" :src="item.thumbnail" />
</div>
<p>
<p class="line-clamp-2 leading-tight">
<span v-text="item.name" />
<i v-if="item.verified" class="i-fa6-solid:check ml-1.5" />
<i-fa6-solid-check v-if="item.verified" class="ml-1.5" />
</p>
</router-link>
<p v-if="item.description" class="pt-1 text-sm" v-text="item.description" />
<router-link v-if="item.uploaderUrl" class="link" :to="item.uploaderUrl">
<p>
<p
v-if="item.description"
class="line-clamp-2 pt-1 text-sm text-gray-600 dark:text-gray-400"
v-text="item.description"
/>
<router-link
v-if="item.uploaderUrl"
class="mt-1 line-clamp-1 block text-sm underline decoration-dark-400 hover:text-dark-400 focus:text-dark-400 dark:text-gray-300 dark:decoration-dark-100 dark:hover:text-gray-400"
:to="item.uploaderUrl"
>
<p class="leading-tight">
<span v-text="item.uploader" />
<i v-if="item.uploaderVerified" class="i-fa6-solid:check ml-1.5" />
<i-fa6-solid-check v-if="item.uploaderVerified" class="ml-1.5" />
</p>
</router-link>
<a v-if="item.uploaderName" class="link" v-text="item.uploaderName" />
<a
v-if="item.uploaderName"
class="mt-1 line-clamp-1 block text-sm hover:text-red-500 focus:text-red-500 dark:text-gray-300 dark:hover:text-red-400 dark:focus:text-red-400"
v-text="item.uploaderName"
/>
<template v-if="item.videos >= 0">
<br v-if="item.uploaderName" />
<strong v-text="`${item.videos} ${$t('video.videos')}`" />
<strong
class="mt-1 text-sm text-gray-800 dark:text-gray-200"
v-text="`${item.videos} ${$t('video.videos')}`"
/>
</template>
<button
v-if="subscribed != null"
class="btn mt-2 w-max"
class="mt-2 inline-block w-max cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
@click="subscribeHandler"
v-text="
$t('actions.' + (subscribed ? 'unsubscribe' : 'subscribe')) + ' - ' + numberFormat(item.subscribers)
"
/>
<br />
</div>
</template>