PageHeader.vue

<template>
  <div class="tw-flex tw-items-center tw-justify-between">
    <h3 class="tw-m-0">
      {{ title }}
      <small
        v-if="selectedShow"
        class="tw-text-gray-500 tw-text-base"
        data-testid="page-header:selected-show-name"
      >
        {{ selectedShow.name }}
      </small>
    </h3>
    <div class="tw-flex tw-justify-end tw-gap-4">
      <slot />
    </div>
  </div>

  <hr />
</template>

<script setup>
import { useSelectedShow } from '@/utilities'

defineProps({
  title: { type: String, required: true },
})
const selectedShow = useSelectedShow()
</script>