2022-12-18 14:22:28 +01:00
|
|
|
<script setup lang="ts">
|
2023-01-08 07:21:09 +01:00
|
|
|
import type { mastodon } from 'masto'
|
2022-12-18 14:22:28 +01:00
|
|
|
|
2023-01-06 19:50:31 +01:00
|
|
|
defineProps<{
|
2023-01-08 07:21:09 +01:00
|
|
|
card: mastodon.v1.PreviewCard
|
2022-12-18 14:22:28 +01:00
|
|
|
/** When it is root card in the list, not appear as a child card */
|
|
|
|
|
root?: boolean
|
|
|
|
|
/** For the preview image, only the small image mode is displayed */
|
|
|
|
|
provider?: string
|
|
|
|
|
}>()
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<div
|
2023-01-09 23:49:05 +01:00
|
|
|
p4 max-h-2xl
|
2022-12-18 14:22:28 +01:00
|
|
|
flex flex-col
|
|
|
|
|
:class="[
|
2023-01-09 23:49:05 +01:00
|
|
|
root ? 'flex-gap-1' : 'justify-center sm:justify-start',
|
2022-12-18 14:22:28 +01:00
|
|
|
]"
|
|
|
|
|
my-auto
|
|
|
|
|
>
|
|
|
|
|
<p text-secondary ws-pre-wrap break-all line-clamp-1>
|
|
|
|
|
{{ provider }}
|
|
|
|
|
</p>
|
|
|
|
|
<strong
|
|
|
|
|
v-if="card.title" font-normal sm:font-medium line-clamp-1
|
|
|
|
|
break-all ws-pre-wrap
|
|
|
|
|
>{{ card.title }}</strong>
|
|
|
|
|
<p
|
|
|
|
|
v-if="card.description"
|
|
|
|
|
line-clamp-1 break-all sm:break-words text-secondary ws-pre-wrap :class="[root ? 'sm:line-clamp-2' : '']"
|
|
|
|
|
>
|
|
|
|
|
{{ card.description }}
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
