* 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
22 lines
570 B
TypeScript
22 lines
570 B
TypeScript
import { cn } from '@/lib/utils'
|
|
|
|
interface CodeBadgeProps {
|
|
code: string | null | undefined
|
|
className?: string
|
|
}
|
|
|
|
export function CodeBadge({ code, className }: CodeBadgeProps) {
|
|
if (!code) return null
|
|
return (
|
|
<span
|
|
data-debug-id="code-badge"
|
|
data-debug-label="CodeBadge — shared/code-badge.tsx"
|
|
className={cn(
|
|
'inline-flex items-center rounded-md border border-border bg-surface-container px-1.5 py-0.5 font-mono text-[11px] leading-none text-muted-foreground',
|
|
className,
|
|
)}
|
|
>
|
|
{code}
|
|
</span>
|
|
)
|
|
}
|