37 lines
916 B
Vue
37 lines
916 B
Vue
<template>
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<div class="space-y-1">
|
|
<h1 class="text-2xl lg:text-3xl font-bold text-base-content">{{ title }}</h1>
|
|
<p v-if="description" class="text-base-content/70">{{ description }}</p>
|
|
</div>
|
|
<div v-if="$slots.actions || actions?.length" class="flex items-center gap-2 flex-shrink-0">
|
|
<slot name="actions">
|
|
<PageHeaderAction
|
|
v-for="(action, i) in actions"
|
|
:key="i"
|
|
:to="action.to"
|
|
:icon="action.icon"
|
|
@click="action.onClick"
|
|
>
|
|
{{ action.label }}
|
|
</PageHeaderAction>
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Action {
|
|
label: string
|
|
icon?: string
|
|
to?: string
|
|
onClick?: () => void
|
|
}
|
|
|
|
defineProps<{
|
|
title: string
|
|
description?: string
|
|
actions?: Action[]
|
|
}>()
|
|
</script>
|