38 lines
1.0 KiB
Vue
38 lines
1.0 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div class="space-y-2">
|
|
<p class="text-xs font-bold uppercase tracking-[0.16em] text-[#8c7b67]">Workspace</p>
|
|
<h1 class="text-2xl font-black text-[#2f2418] lg:text-3xl">{{ title }}</h1>
|
|
<p v-if="description" class="max-w-[720px] text-sm leading-6 text-[#6f6353]">{{ 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>
|