39 lines
1.2 KiB
Vue
39 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
to: string;
|
|
backLabel: string;
|
|
title: string;
|
|
subtitle?: string;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
|
|
<div class="min-w-0 space-y-3">
|
|
<div class="flex flex-wrap items-center gap-3 px-1">
|
|
<NuxtLink
|
|
:to="to"
|
|
:aria-label="backLabel"
|
|
class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-white/70 text-[#0d854a] transition hover:bg-white"
|
|
>
|
|
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="none">
|
|
<path d="M11.5 4.5L6 10L11.5 15.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
</NuxtLink>
|
|
|
|
<h1 class="min-w-0 text-2xl font-black tracking-[-0.03em] text-[#123824] md:text-3xl">
|
|
{{ title }}
|
|
</h1>
|
|
</div>
|
|
|
|
<p v-if="subtitle" class="max-w-3xl pl-[3.5rem] text-sm leading-6 text-[#466653]">
|
|
{{ subtitle }}
|
|
</p>
|
|
</div>
|
|
|
|
<div v-if="$slots.actions" class="flex shrink-0 flex-wrap gap-2 md:justify-end">
|
|
<slot name="actions" />
|
|
</div>
|
|
</div>
|
|
</template>
|