62 lines
2.2 KiB
Vue
62 lines
2.2 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
badge: {
|
|
type: [String, Array],
|
|
default: null
|
|
},
|
|
subtitle: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
batteryLevel: {
|
|
type: Number,
|
|
default: 80
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<header class="h-12 border-b border-zinc-800 flex items-center justify-between px-4 bg-zinc-900/90 backdrop-blur z-20 shrink-0 select-none">
|
|
<div class="flex items-center gap-2">
|
|
<h1 class="font-bold text-sm uppercase tracking-tight text-white">{{ title }}</h1>
|
|
|
|
<!-- Badge - can be string or array -->
|
|
<template v-if="badge">
|
|
<!-- Single badge (string) -->
|
|
<span v-if="typeof badge === 'string'"
|
|
class="text-zinc-500 font-mono text-[10px] border border-zinc-800 px-1.5 py-0.5 rounded bg-zinc-900">
|
|
{{ badge }}
|
|
</span>
|
|
|
|
<!-- Multiple badges (array) -->
|
|
<div v-else class="flex gap-1">
|
|
<span v-for="(item, index) in badge" :key="index"
|
|
class="text-[8px] uppercase font-bold px-1.5 py-0.5 rounded border border-zinc-700 bg-zinc-900 text-zinc-400">
|
|
{{ item }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Separator and Subtitle -->
|
|
<template v-if="subtitle">
|
|
<div class="h-4 w-px bg-zinc-800"></div>
|
|
<span class="text-[10px] text-zinc-500">{{ subtitle }}</span>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<!-- Battery Indicator -->
|
|
<div class="flex items-center gap-1">
|
|
<div class="w-6 h-3 rounded-xs border border-zinc-600 p-px relative flex">
|
|
<div class="h-full bg-zinc-400 rounded-[1px]" :style="{ width: `${batteryLevel}%` }"></div>
|
|
<div class="absolute -right-0.75 top-1/2 -translate-y-1/2 w-0.5 h-1.5 bg-zinc-600 rounded-r-[1px]"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|