Extract shared utilities (color functions, icon registry), replace hero banners with compact PageHeader, add TrimesterSelector/ConfirmDialog/ Breadcrumb components, consolidate off-palette colors to design tokens, convert AssessmentListView to table layout, compress ResultsView stats into horizontal bar, and inline ClassFormView as a modal in ClassListView. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
48 lines
1.2 KiB
Vue
48 lines
1.2 KiB
Vue
<template>
|
|
<div class="mb-6">
|
|
<Breadcrumb v-if="breadcrumbs && breadcrumbs.length" :crumbs="breadcrumbs" />
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-3">
|
|
<router-link
|
|
v-if="backTo"
|
|
:to="backTo"
|
|
class="text-gray-400 hover:text-gray-600"
|
|
>
|
|
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
|
|
</router-link>
|
|
<h1 class="text-2xl font-bold text-gray-900">{{ title }}</h1>
|
|
<slot name="meta"></slot>
|
|
</div>
|
|
<p v-if="subtitle" class="text-sm text-gray-500 mt-1">{{ subtitle }}</p>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<slot name="actions"></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Breadcrumb from '@/components/common/Breadcrumb.vue'
|
|
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
subtitle: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
backTo: {
|
|
type: [String, Object],
|
|
default: null
|
|
},
|
|
breadcrumbs: {
|
|
type: Array,
|
|
default: null
|
|
}
|
|
})
|
|
</script>
|