95 lines
2.1 KiB
Vue
95 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { Command, Search, CircleDot, Sparkles } from '@lucide/vue'
|
|
|
|
defineProps<{
|
|
connected: boolean
|
|
}>()
|
|
|
|
defineEmits<{
|
|
toggleMobileNav: []
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<header class="topbar">
|
|
<button class="mobile-menu" @click="$emit('toggleMobileNav')">
|
|
<Command :size="19" />
|
|
</button>
|
|
<div class="search">
|
|
<Search :size="16" />
|
|
<span>Search operations</span>
|
|
<kbd>⌘ K</kbd>
|
|
</div>
|
|
<div class="top-actions">
|
|
<span :class="['connection', connected ? 'live' : 'preview']">
|
|
<CircleDot :size="13" />
|
|
{{ connected ? 'Live' : 'Preview data' }}
|
|
</span>
|
|
<button class="ask"><Sparkles :size="15" /> Ask Iris</button>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 10px 20px;
|
|
border-bottom: 1px solid var(--nx-line, #1f2330);
|
|
background: var(--nx-panel, #11141b);
|
|
}
|
|
.mobile-menu { display: none; }
|
|
.search {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex: 1;
|
|
padding: 6px 12px;
|
|
border: 1px solid var(--nx-line, #1f2330);
|
|
border-radius: 7px;
|
|
color: var(--nx-text-dim, #6f7889);
|
|
font-size: 11px;
|
|
}
|
|
.search kbd {
|
|
margin-left: auto;
|
|
padding: 1px 4px;
|
|
border: 1px solid #2a2f3d;
|
|
border-radius: 4px;
|
|
font-size: 8px;
|
|
color: #4a5266;
|
|
}
|
|
.top-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.connection {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 9px;
|
|
font-weight: 600;
|
|
padding: 4px 9px;
|
|
border-radius: 6px;
|
|
}
|
|
.connection.live { color: #27ae60; background: rgba(39,174,96,.1); }
|
|
.connection.preview { color: #e67e22; background: rgba(230,126,34,.1); }
|
|
.ask {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 5px 10px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: var(--nx-accent, #7b6ef2);
|
|
color: #fff;
|
|
font-size: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
.mobile-menu { display: flex; align-items: center; justify-content: center; padding: 6px; border: 1px solid var(--nx-line, #1f2330); border-radius: 6px; background: transparent; color: var(--nx-accent, #7b6ef2); cursor: pointer; }
|
|
}
|
|
</style>
|