a16988b957
* feat(debug-store): Zustand store met hydration-flag voor debug-modus * feat(status-bar): dev-only debug-toggle via geïsoleerde sub-component * feat(globals.css): debug-mode overlay CSS voor data-debug-id elementen * feat(shared): data-debug-id+label op navigatie-componenten * feat(shared): data-debug-id+label op form/select-componenten * feat(shared): data-debug-id+label op display-componenten
20 lines
642 B
TypeScript
20 lines
642 B
TypeScript
import { cn } from '@/lib/utils'
|
|
|
|
interface PanelNavBarProps {
|
|
title: string
|
|
actions?: React.ReactNode
|
|
className?: string
|
|
}
|
|
|
|
export function PanelNavBar({ title, actions, className }: PanelNavBarProps) {
|
|
return (
|
|
<div
|
|
data-debug-id="panel-nav-bar"
|
|
data-debug-label="PanelNavBar — shared/panel-nav-bar.tsx"
|
|
className={cn('flex items-center justify-between px-4 py-2 border-b border-border bg-surface-container-low shrink-0', className)}
|
|
>
|
|
<span className="text-sm font-medium text-foreground">{title}</span>
|
|
{actions && <div className="flex items-center gap-2">{actions}</div>}
|
|
</div>
|
|
)
|
|
}
|