<script setup lang="ts">
defineProps<{ title: string; sub?: string }>()
</script>

<template>
  <div class="flex flex-wrap items-baseline justify-between gap-2">
    <div class="flex items-baseline gap-3">
      <h1 class="page-title">{{ title }}</h1>
      <slot name="title-extra" />
    </div>
    <div class="flex items-center gap-2">
      <span v-if="sub" class="text-[13px] text-ink-3">{{ sub }}</span>
      <slot name="actions" />
    </div>
  </div>
</template>
