internal/dashboard/frontend/src/components/PageHeader.vue

<script setup lang="ts">
import type { Component } from "vue";

defineProps<{
  title: string;
  icon?: Component;
  iconClass?: string;
}>();
</script>

<template>
  <div class="page-header">
    <div class="flex flex-wrap items-center gap-4">
      <h1 class="page-title">
        <component
          :is="icon"
          v-if="icon"
          size="28"
          :class="iconClass || 'text-primary-500'"
        />
        {{ title }}
      </h1>
      <slot name="left" />
    </div>
    <div class="flex items-center gap-2">
      <slot name="actions" />
    </div>
  </div>
</template>