47 lines
1.3 KiB
Vue
47 lines
1.3 KiB
Vue
<template>
|
|
<div :class="['bg-white shadow-sm px-4 py-2', $attrs.class]">
|
|
<div class="container mx-auto flex justify-between items-center">
|
|
<!-- Left section -->
|
|
<div class="flex items-center space-x-2">
|
|
<button
|
|
v-for="(item, index) in config.leftSection"
|
|
:key="index"
|
|
@click="item.onClick"
|
|
:class="[
|
|
'p-2 rounded-lg transition-colors',
|
|
item.active
|
|
? 'bg-green-100 text-green-600'
|
|
: 'hover:bg-gray-100'
|
|
]"
|
|
>
|
|
<component :is="item.icon" class="h-5 w-5" />
|
|
<span v-if="item.label" class="ml-2">{{ item.label }}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Right section -->
|
|
<div class="flex items-center space-x-2">
|
|
<button
|
|
v-for="(item, index) in config.rightSection"
|
|
:key="index"
|
|
@click="item.onClick"
|
|
class="p-2 rounded-lg hover:bg-gray-100 transition-colors"
|
|
>
|
|
<component :is="item.icon" class="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
config: {
|
|
type: Object,
|
|
required: true,
|
|
validator: (value) => {
|
|
return value.leftSection && value.rightSection;
|
|
}
|
|
}
|
|
});
|
|
</script> |