|
3 | 3 | <div class="flex flex-col overflow-x-auto whitespace-nowrap"> |
4 | 4 | <table class="table-auto text-center bg-base-200"> |
5 | 5 | <thead> |
6 | | - <tr class="text-sm text-base-content/75"> |
7 | | - <th class="py-2">Name</th> |
8 | | - <th>Size</th> |
9 | | - <th>Date</th> |
10 | | - <th>Uploader</th> |
11 | | - <th>Seeders</th> |
12 | | - <th>Leechers</th> |
13 | | - <th>Actions</th> |
14 | | - </tr> |
| 6 | + <tr class="text-sm text-base-content/75"> |
| 7 | + <th class="py-2"> |
| 8 | + Name |
| 9 | + </th> |
| 10 | + <th>Size</th> |
| 11 | + <th>Date</th> |
| 12 | + <th>Uploader</th> |
| 13 | + <th>Seeders</th> |
| 14 | + <th>Leechers</th> |
| 15 | + <th>Actions</th> |
| 16 | + </tr> |
15 | 17 | </thead> |
16 | 18 | <tbody> |
17 | | - <tr v-for="(torrent, index) in torrents" :key="index" class="bg-base-100 text-sm"> |
18 | | - <td class="pl-6 text-left font-bold"><span @click.stop="$router.push(`/torrent/${torrent.info_hash}`)" class="cursor-pointer hover:text-amber-500 duration-200">{{ torrent.title }}</span></td> |
19 | | - <td class="px-2">{{ fileSize(torrent.file_size) }}</td> |
20 | | - <td>{{ timeSince(new Date(torrent.date_uploaded)) }} ago ({{ new Date(torrent.date_uploaded).toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) }})</td> |
21 | | - <td>{{ torrent.uploader }}</td> |
22 | | - <td class="text-green-500">{{ torrent.seeders }}</td> |
23 | | - <td class="text-red-500">{{ torrent.leechers }}</td> |
24 | | - <td> |
25 | | - <div class="flex flex-row flex-nowrap items-center justify-center font-semibold"> |
26 | | - <div class="ml-2 w-10 h-10 text-base-content/50 hover:text-base-content flex flex-col shrink-0 items-center justify-center duration-500 cursor-pointer" @click.stop="downloadTorrent(torrent.info_hash, torrent.title)"> |
27 | | - <ArrowDownTrayIcon class="w-5" /> |
| 19 | + <tr v-for="(torrent, index) in torrents" :key="index" class="bg-base-100 text-sm"> |
| 20 | + <td class="pl-6 text-left font-bold"> |
| 21 | + <span class="cursor-pointer hover:text-amber-500 duration-200" @click.stop="$router.push(`/torrent/${torrent.info_hash}`)">{{ torrent.title }}</span> |
| 22 | + </td> |
| 23 | + <td class="px-2"> |
| 24 | + {{ fileSize(torrent.file_size) }} |
| 25 | + </td> |
| 26 | + <td>{{ timeSince(new Date(torrent.date_uploaded)) }} ago ({{ new Date(torrent.date_uploaded).toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) }})</td> |
| 27 | + <td>{{ torrent.uploader }}</td> |
| 28 | + <td class="text-green-500"> |
| 29 | + {{ torrent.seeders }} |
| 30 | + </td> |
| 31 | + <td class="text-red-500"> |
| 32 | + {{ torrent.leechers }} |
| 33 | + </td> |
| 34 | + <td> |
| 35 | + <div class="flex flex-row flex-nowrap items-center justify-center font-semibold"> |
| 36 | + <div class="ml-2 w-10 h-10 text-base-content/50 hover:text-base-content flex flex-col shrink-0 items-center justify-center duration-500 cursor-pointer" @click.stop="downloadTorrent(torrent.info_hash, torrent.title)"> |
| 37 | + <ArrowDownTrayIcon class="w-5" /> |
| 38 | + </div> |
| 39 | + <div class="ml-2 w-10 h-10 text-base-content/50 hover:text-base-content flex flex-col shrink-0 items-center justify-center duration-500 cursor-pointer"> |
| 40 | + <a class="flex items-center" :href="`magnet:?xt=urn:btih:${torrent.info_hash}`"> |
| 41 | + <LinkIcon class="w-5" /> |
| 42 | + </a> |
| 43 | + </div> |
28 | 44 | </div> |
29 | | - <div class="ml-2 w-10 h-10 text-base-content/50 hover:text-base-content flex flex-col shrink-0 items-center justify-center duration-500 cursor-pointer"> |
30 | | - <a class="flex items-center" :href="`magnet:?xt=urn:btih:${torrent.info_hash}`"> |
31 | | - <LinkIcon class="w-5" /> |
32 | | - </a> |
33 | | - </div> |
34 | | - </div> |
35 | | - </td> |
36 | | - </tr> |
| 45 | + </td> |
| 46 | + </tr> |
37 | 47 | </tbody> |
38 | 48 | </table> |
39 | 49 | </div> |
|
44 | 54 | import { ArrowDownTrayIcon, LinkIcon } from "@heroicons/vue/24/outline"; |
45 | 55 | import { PropType } from "vue"; |
46 | 56 | import { TorrentCompact } from "torrust-index-types-lib"; |
47 | | -import { fileSize, timeSince, ref } from "#imports"; |
48 | | -import { downloadTorrent } from "#imports"; |
| 57 | +import { fileSize, timeSince, ref, downloadTorrent } from "#imports"; |
49 | 58 |
|
50 | 59 | const props = defineProps({ |
51 | 60 | torrents: Array as PropType<Array<TorrentCompact>> |
|
0 commit comments