53 lines
1.4 KiB
Vue
53 lines
1.4 KiB
Vue
<template>
|
|
<header class="bg-white shadow-sm border-b border-gray-200 px-8 py-4">
|
|
<div class="flex justify-between items-center">
|
|
<!-- Left: Page Title -->
|
|
<div>
|
|
<h1 v-if="title" class="text-2xl font-bold text-gray-900">{{ title }}</h1>
|
|
<p v-if="subtitle" class="text-sm text-gray-600 mt-1">{{ subtitle }}</p>
|
|
</div>
|
|
|
|
<!-- Right: Actions & User -->
|
|
<div class="flex items-center gap-4">
|
|
<!-- Action Buttons Slot -->
|
|
<slot name="actions"></slot>
|
|
|
|
<!-- User Avatar & Info -->
|
|
<div class="flex items-center gap-3">
|
|
<div class="text-right">
|
|
<div class="text-sm font-semibold text-gray-900">{{ userName }}</div>
|
|
<div class="text-xs text-gray-500">{{ userRole }}</div>
|
|
</div>
|
|
<div
|
|
class="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center text-lg cursor-pointer hover:bg-primary-200 transition"
|
|
@click="$emit('avatar-click')"
|
|
>
|
|
{{ userAvatar }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
title?: string;
|
|
subtitle?: string;
|
|
userName?: string;
|
|
userRole?: string;
|
|
userAvatar?: string;
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
title: '',
|
|
subtitle: '',
|
|
userName: 'ผู้ใช้งาน',
|
|
userRole: 'User',
|
|
userAvatar: '👤'
|
|
});
|
|
|
|
defineEmits<{
|
|
'avatar-click': [];
|
|
}>();
|
|
</script>
|