mirror of
https://github.com/lukaszraczylo/git-velocity.git
synced 2026-06-16 03:22:47 +00:00
53 lines
1.2 KiB
Vue
53 lines
1.2 KiB
Vue
<script setup>
|
|
import Breadcrumb from './Breadcrumb.vue'
|
|
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
subtitle: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
icon: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
iconColor: {
|
|
type: String,
|
|
default: 'text-primary-500'
|
|
},
|
|
breadcrumbs: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
centered: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<header class="py-12 px-4">
|
|
<div class="container mx-auto" :class="{ 'text-center': centered }">
|
|
<Breadcrumb v-if="breadcrumbs.length" :items="breadcrumbs" />
|
|
|
|
<div class="flex items-center" :class="centered ? 'justify-center' : ''">
|
|
<slot name="prefix"></slot>
|
|
<h1 class="text-4xl font-bold mb-4">
|
|
<i v-if="icon" :class="[icon, iconColor]" class="mr-3"></i>
|
|
<span class="bg-gradient-to-r from-primary-400 to-accent-400 bg-clip-text text-transparent">{{ title }}</span>
|
|
</h1>
|
|
</div>
|
|
|
|
<p v-if="subtitle || $slots.subtitle" class="text-gray-300">
|
|
<slot name="subtitle">{{ subtitle }}</slot>
|
|
</p>
|
|
|
|
<slot name="extra"></slot>
|
|
</div>
|
|
</header>
|
|
</template>
|