| 1 | <script setup lang="ts"> |
| 2 | import type { ShowCaseInfo } from '../../showcases' |
| 3 | |
| 4 | defineProps<{ |
| 5 | info: ShowCaseInfo |
| 6 | }>() |
| 7 | </script> |
| 8 | |
| 9 | <template> |
| 10 | <div class="flex flex-col gap-2"> |
| 11 | <div class="block w-full relative aspect-16/9"> |
| 12 | <a |
| 13 | class="absolute top-0 bottom-0 left-0 right-0 overflow-hidden" |
| 14 | border="~ rounded gray-400 opacity-20" |
| 15 | :href="info.slidesLink" |
| 16 | target="_blank" |
| 17 | > |
| 18 | <img :src="info.cover"> |
| 19 | </a> |
| 20 | </div> |
| 21 | <div class="font-bold line-clamp-2"> |
| 22 | {{ info.title }} |
| 23 | </div> |
| 24 | <div class="text-current text-xs opacity-75 whitespace-nowrap overflow-hidden overflow-ellipsis"> |
| 25 | {{ info.at }} |
| 26 | </div> |
| 27 | <div class="flex-auto" /> |
| 28 | <div class="flex"> |
| 29 | <a |
| 30 | v-if="info.author.link" |
| 31 | :href="info.author.link" |
| 32 | class="text-current! text-sm opacity-50 whitespace-nowrap overflow-hidden overflow-ellipsis" |
| 33 | target="_blank" |
| 34 | >{{ info.author.name }}</a> |
| 35 | <div v-else class="text-current! text-sm opacity-50 whitespace-nowrap overflow-hidden overflow-ellipsis"> |
| 36 | {{ info.author.name }} |
| 37 | </div> |
| 38 | <div class="flex-auto" /> |
| 39 | <a |
| 40 | v-if="info.videoLink" |
| 41 | :href="info.videoLink" |
| 42 | class="ml-2 text-current! opacity-20 hover:opacity-100 hover:text-[#cb3837]" |
| 43 | target="_blank" |
| 44 | > |
| 45 | <div class="i-carbon:video" /> |
| 46 | </a> |
| 47 | <a |
| 48 | v-if="info.slidesLink" |
| 49 | :href="info.slidesLink" |
| 50 | class="ml-2 text-current! opacity-20 hover:opacity-100 hover:text-[#cb3837]" |
| 51 | target="_blank" |
| 52 | > |
| 53 | <div class="i-carbon:presentation-file" /> |
| 54 | </a> |
| 55 | <a |
| 56 | v-if="info.sourceLink" |
| 57 | :href="info.sourceLink" |
| 58 | class="ml-2 text-current! opacity-20 hover:opacity-100" |
| 59 | target="_blank" |
| 60 | > |
| 61 | <div class="i-carbon:logo-github" /> |
| 62 | </a> |
| 63 | </div> |
| 64 | </div> |
| 65 | </template> |
| 66 |