35 lines
1.1 KiB
Vue
35 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { Badge } from '@/components/ui/badge';
|
|
import type { ProjectPageHeaderProps } from '@/types/project-navigation';
|
|
|
|
defineProps<ProjectPageHeaderProps>();
|
|
</script>
|
|
|
|
<template>
|
|
<header
|
|
class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between"
|
|
>
|
|
<div class="min-w-0">
|
|
<div class="flex items-center gap-2">
|
|
<Badge variant="outline" class="rounded px-2.5 py-1">
|
|
{{ project.key }}
|
|
</Badge>
|
|
<span class="text-muted-foreground text-xs font-medium">
|
|
{{ context }}
|
|
</span>
|
|
</div>
|
|
|
|
<h1 class="mt-2 truncate text-2xl font-bold tracking-tight">
|
|
{{ project.name }}
|
|
</h1>
|
|
<p class="text-muted-foreground mt-1 max-w-3xl text-sm leading-6">
|
|
{{ description }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex shrink-0 flex-wrap gap-2 self-start sm:self-auto">
|
|
<slot />
|
|
</div>
|
|
</header>
|
|
</template>
|