elk/components/status/StatusBody.vue

<script setup lang="ts">
import type { Status, StatusEdit } from 'masto'

const { status, withAction = true } = defineProps<{
  status: Status | StatusEdit
  withAction?: boolean
}>()

const { translation } = useTranslation(status)
</script>

<template>
  <div class="status-body mt2" whitespace-pre-wrap break-words :class="{ 'with-action': withAction }">
    <ContentRich
      v-if="status.content"
      class="line-compact"
      :content="status.content"
      :emojis="status.emojis"
      :lang="'language' in status && status.language"
    />
    <div v-else />
    <template v-if="translation.visible">
      <div my2 h-px border="b base" bg-base />
      <ContentRich class="line-compact" :content="translation.text" :emojis="status.emojis" />
    </template>
  </div>
</template>

<style>
.status-body.with-action p {
  cursor: pointer;
  min-height: 2rem;
}
</style>