PageHeader.vue

<template>
  <header
    class="tw-flex tw-items-center tw-justify-between tw-mb-10 tw-border-solid tw-border-gray-200 tw-border-0 tw-border-b tw-pb-6"
    data-testid="page-header"
  >
    <h1 class="tw-text-5xl tw-font-black tw-m-0">
      <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-2"
        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'

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