bagus-arie05
173 lines
3.6 KiB
Vue
173 lines
3.6 KiB
Vue
<template>
|
|
<div class="page-header" :class="`page-header-${theme}`">
|
|
<div class="header-content">
|
|
<div class="header-left">
|
|
<div class="header-icon">
|
|
<v-icon size="32" color="white">{{ icon }}</v-icon>
|
|
</div>
|
|
<div class="header-text">
|
|
<h2 class="page-title">{{ title }}</h2>
|
|
<p class="page-subtitle">{{ subtitle }}</p>
|
|
</div>
|
|
</div>
|
|
<slot name="actions">
|
|
<v-btn
|
|
v-if="showAddButton"
|
|
color="white"
|
|
elevation="0"
|
|
class="add-btn"
|
|
:class="`add-btn-${theme}`"
|
|
@click="$emit('add-click')"
|
|
>
|
|
<v-icon left size="20">mdi-plus-circle</v-icon>
|
|
{{ addButtonText }}
|
|
</v-btn>
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
icon: {
|
|
type: String,
|
|
default: 'mdi-view-dashboard'
|
|
},
|
|
title: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
subtitle: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
showAddButton: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
addButtonText: {
|
|
type: String,
|
|
default: 'Tambah'
|
|
},
|
|
theme: {
|
|
type: String,
|
|
default: 'primary', // 'primary', 'secondary', 'success', 'accent', or 'warning'
|
|
validator: (value) => ['primary', 'secondary', 'success', 'accent', 'warning'].includes(value)
|
|
}
|
|
});
|
|
|
|
defineEmits(['add-click']);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$neutral-100: #FFFFFF;
|
|
$primary-600: #FFA532;
|
|
$primary-700: #FF9B1B;
|
|
$secondary-600: #0671E0;
|
|
$secondary-700: #0053AD;
|
|
$success-600: #009262;
|
|
$success-700: #1B6E53;
|
|
$accent-600: #8B5CF6;
|
|
$accent-700: #7C3AED;
|
|
$warning-600: #FF9800;
|
|
$warning-700: #F57C00;
|
|
$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
$font-weight-regular: 400;
|
|
$font-weight-semibold: 600;
|
|
|
|
.page-header {
|
|
border-radius: 16px 16px 0 0;
|
|
}
|
|
|
|
.page-header-primary {
|
|
background: linear-gradient(135deg, $primary-600 0%, $primary-700 100%);
|
|
box-shadow: 0 4px 16px rgba(255, 165, 50, 0.2);
|
|
}
|
|
|
|
.page-header-secondary {
|
|
background: linear-gradient(135deg, $secondary-600 0%, $secondary-700 100%);
|
|
box-shadow: 0 4px 16px rgba(6, 113, 224, 0.2);
|
|
}
|
|
|
|
.page-header-success {
|
|
background: linear-gradient(135deg, $success-600 0%, $success-700 100%);
|
|
box-shadow: 0 4px 16px rgba(0, 146, 98, 0.2);
|
|
}
|
|
|
|
.page-header-accent {
|
|
background: linear-gradient(135deg, $accent-600 0%, $accent-700 100%);
|
|
box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
|
|
}
|
|
|
|
.page-header-warning {
|
|
background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
|
|
box-shadow: 0 4px 16px rgba(255, 152, 0, 0.3);
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 32px;
|
|
color: $neutral-100;
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-icon {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 16px;
|
|
padding: 16px;
|
|
margin-right: 20px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 36px;
|
|
line-height: 44px;
|
|
font-weight: $font-weight-semibold;
|
|
margin: 0;
|
|
color: $neutral-100;
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.page-subtitle {
|
|
margin: 4px 0 0 0;
|
|
opacity: 0.9;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
font-weight: $font-weight-regular;
|
|
color: $neutral-100;
|
|
}
|
|
|
|
.add-btn {
|
|
font-weight: $font-weight-semibold;
|
|
text-transform: none;
|
|
letter-spacing: 0.5px;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.add-btn-primary {
|
|
color: $primary-600 !important;
|
|
}
|
|
|
|
.add-btn-secondary {
|
|
color: $secondary-600 !important;
|
|
}
|
|
|
|
.add-btn-success {
|
|
color: $success-600 !important;
|
|
}
|
|
|
|
.add-btn-accent {
|
|
color: $accent-600 !important;
|
|
}
|
|
|
|
.add-btn-warning {
|
|
color: $warning-600 !important;
|
|
}
|
|
</style> |