PageHeader.vue

<template>
  <header
    class="tw-flex tw-items-center tw-justify-between -tw-m-6 tw-p-6 tw-mb-10 tw-bg-white tw-shadow-sm"
    data-testid="page-header"
  >
    <h1 class="tw-text-5xl tw-font-black tw-m-0">
      <ATimeEditInfo
        v-if="editingMetadata"
        :edit-info="{
          time: editingMetadata.updatedAt ?? editingMetadata.createdAt,
          author: editingMetadata.updatedBy ?? editingMetadata.createdBy,
        }"
        :type="editingMetadata.updatedAt ? 'modified' : 'created'"
        class="tw-text-xs tw-block tw-mb-2 tw-font-normal"
      />

      <SafeHTML
        v-if="lead"
        as="small"
        :html="lead"
        sanitize-preset="inline-noninteractive"
        class="tw-block tw-text-gray-300 tw-font-bold tw-text-4xl tw-mb-0"
        data-testid="page-header:lead"
      />
      <span data-testid="page-header:title">
        <slot name="title">{{ title }}</slot>
      </span>
    </h1>
    <div class="tw-flex tw-justify-end tw-gap-4">
      <slot />
    </div>
  </header>
</template>

<script lang="ts" setup>
import SafeHTML from '@/components/generic/SafeHTML'
import { EditingMetaData } from '@/types'
import ATimeEditInfo from '@/components/generic/ATimeEditInfo.vue'

defineProps<{
  title?: string
  lead?: string
  editingMetadata?: EditingMetaData
}>()
</script>