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

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

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

<template>
  <div class="card">
    <div
      v-if="title || $slots['header-right']"
      class="mb-4 flex items-center justify-between"
    >
      <h2 v-if="title" class="section-title mb-0">
        <component :is="icon" v-if="icon" size="20" class="text-primary-500" />
        {{ title }}
      </h2>
      <slot name="header-right" />
    </div>
    <div :class="bodyClass">
      <slot />
    </div>
  </div>
</template>