elk/components/status/StatusBody.vue
2022-11-25 20:10:45 +08:00

28 lines
720 B
Vue

<script setup lang="ts">
import type { Status } from 'masto'
const { status } = defineProps<{
status: Status
}>()
const { translation } = useTranslation(status)
const [showContent, toggleContent] = $(useToggle(!status.sensitive))
</script>
<template>
<div class="status-body" whitespace-pre-wrap break-words>
<template v-if="status.sensitive">
{{ status.spoilerText }}
<button btn-outline px-2 py-1 text-3 @click="toggleContent()">
{{ showContent ? 'Show less' : 'Show more' }}
</button>
</template>
<ContentRichSetup
v-if="showContent"
:content="translation.visible ? translation.text : status.content"
:emojis="status.emojis"
/>
</div>
</template>