web-antrean/components/common/PageHeader.vue

<template>
  <div class="page-header" :class="`page-header-${theme}`">
    <div class="header-content">
      <div class="header-left">
        <div class="header-icon">
          <NuxtImg
            v-if="logo"
            :src="logo"
            :alt="title"
            width="48"
            height="48"
            class="header-logo"
            loading="eager"
          />
          <v-icon v-else size="28" 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'
  },
  logo: {
    type: String,
    default: ''
  },
  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">
$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
$font-weight-regular: 400;
$font-weight-semibold: 600;

.page-header {
  border-radius: 0;
}

.page-header-primary {
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-700) 100%);
  box-shadow: 0 4px 16px rgba(58, 97, 201, 0.2);
}

.page-header-secondary {
  background: linear-gradient(135deg, var(--color-secondary-600) 0%, var(--color-secondary-700) 100%);
  box-shadow: 0 4px 16px rgba(241, 111, 41, 0.2);
}

.page-header-success {
  background: linear-gradient(135deg, var(--color-success-600) 0%, var(--color-success-700) 100%);
  box-shadow: 0 4px 16px rgba(51, 164, 132, 0.2);
}

.page-header-accent {
  // Accent tidak ada di design system, menggunakan secondary sebagai fallback
  background: linear-gradient(135deg, var(--color-secondary-500) 0%, var(--color-secondary-600) 100%);
  box-shadow: 0 4px 16px rgba(255, 132, 65, 0.2);
}

.page-header-warning {
  // Warning tidak ada di design system, menggunakan secondary (orange) sebagai fallback
  background: linear-gradient(135deg, var(--color-secondary-600) 0%, var(--color-secondary-700) 100%);
  box-shadow: 0 4px 16px rgba(241, 111, 41, 0.2);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  height: 80px;
  color: var(--color-neutral-100);
}

.header-left {
  display: flex;
  align-items: center;
}

.header-icon {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 12px;
  margin-right: 16px;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.header-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 50%;
  max-width: 100%;
  max-height: 100%;
}

.page-title {
  font-size: 32px;
  line-height: 40px;
  font-weight: $font-weight-semibold;
  margin: 0;
  color: var(--color-neutral-100);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-subtitle {
  margin: 2px 0 0 0;
  opacity: 0.9;
  font-size: 15px;
  line-height: 22px;
  font-weight: $font-weight-regular;
  color: var(--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: var(--color-primary-600) !important;
}

.add-btn-secondary {
  color: var(--color-secondary-600) !important;
}

.add-btn-success {
  color: var(--color-success-600) !important;
}

.add-btn-accent {
  // Accent tidak ada di design system, menggunakan secondary sebagai fallback
  color: var(--color-secondary-500) !important;
}

.add-btn-warning {
  // Warning tidak ada di design system, menggunakan secondary (orange) sebagai fallback
  color: var(--color-secondary-600) !important;
}
</style>