frontend/src/components/base/PageHeaderCard.vue

<script setup>
import BaseIcon from "./BaseIcon.vue";

defineProps({
  icon: { type: [Object, Function], default: null },
  title: { type: String, required: true },
  description: { type: String, default: "" },
  iconClass: { type: String, default: "bg-primary/10 text-primary dark:bg-primary/20" },
});
</script>

<template>
  <section class="rounded-2xl border border-gray-200 bg-gray-100/50 p-6 shadow-sm backdrop-blur-md dark:border-gray-700 dark:bg-secondary/50">
    <div class="flex flex-wrap items-center justify-between gap-4">
      <div class="flex items-center gap-4">
        <div
          v-if="icon"
          class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl"
          :class="iconClass"
        >
          <BaseIcon :icon="icon" class="h-5 w-5" />
        </div>
        <div class="min-w-0">
          <h2 class="text-base font-semibold text-foreground">{{ title }}</h2>
          <p v-if="description" class="mt-0.5 text-sm text-muted-foreground">{{ description }}</p>
        </div>
      </div>
      <slot name="actions" />
    </div>
    <slot />
  </section>
</template>