ShowListTableRow.vue

<template>
  <tr :class="{ 'tw-opacity-50': !show.isActive }">
    <td>
      <Image :image="showLogo" class="tw-w-12 tw-bg-gray-300 rounded-lg" square />
    </td>
    <td>
      <router-link
        :to="{ name: 'show', params: { showId: show.id } }"
        class="tw-text-inherit tw-block tw-no-underline tw-group"
      >
        <SafeHTML :html="show.name" class="tw-block tw-font-semibold group-hover:tw-underline" />
        <SafeHTML :html="show.shortDescription" class="tw-text-sm" />
      </router-link>
    </td>
    <td>
      <ATime v-if="updatedAt" :time="updatedAt" class="tw-block">
        {{ updatedAtRelative }}
      </ATime>
      <span v-if="show.updatedBy" class="tw-block tw-text-sm">
        {{ t('by') }} {{ show.updatedBy }}
      </span>
    </td>
  </tr>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { Show } from '@/types'
import SafeHTML from '@/components/generic/SafeHTML'
import { parseISO } from 'date-fns'
import ATime from '@/components/generic/ATime.vue'
import { useI18n } from '@/i18n'
import { useImage } from '@/stores/images'
import Image from '@/components/generic/Image.vue'
import { useRelativeDistanceToNow } from '@/util'

defineOptions({ compatConfig: { MODE: 3 } })

const props = defineProps<{
  show: Show
}>()
const { t } = useI18n()
const showLogo = useImage(() => props.show.logoId)
const updatedAt = computed(() => (props.show.updatedAt ? parseISO(props.show.updatedAt) : null))
const updatedAtRelative = useRelativeDistanceToNow(updatedAt, { addSuffix: true })
</script>