32 lines
1.3 KiB
TypeScript
32 lines
1.3 KiB
TypeScript
|
import type { ReactNode } from 'react'
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
label: string
|
||
|
|
hint?: string
|
||
|
|
right?: ReactNode
|
||
|
|
children: ReactNode
|
||
|
|
className?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Instrument panel chrome: hairline frame, corner ticks, eyebrow label. */
|
||
|
|
export function Panel({ label, hint, right, children, className = '' }: Props) {
|
||
|
|
return (
|
||
|
|
<section className={`relative border border-wire bg-deck ${className}`}>
|
||
|
|
<span className="pointer-events-none absolute -left-px -top-px h-2 w-2 border-l border-t border-wire-lit" />
|
||
|
|
<span className="pointer-events-none absolute -right-px -top-px h-2 w-2 border-r border-t border-wire-lit" />
|
||
|
|
<span className="pointer-events-none absolute -bottom-px -left-px h-2 w-2 border-b border-l border-wire-lit" />
|
||
|
|
<span className="pointer-events-none absolute -bottom-px -right-px h-2 w-2 border-b border-r border-wire-lit" />
|
||
|
|
|
||
|
|
<header className="flex items-baseline justify-between gap-4 border-b border-wire px-4 py-2.5">
|
||
|
|
<div className="flex items-baseline gap-3">
|
||
|
|
<h2 className="font-data text-[11px] uppercase tracking-[0.18em] text-chalk">{label}</h2>
|
||
|
|
{hint && <p className="font-data text-[10px] text-dim">{hint}</p>}
|
||
|
|
</div>
|
||
|
|
{right}
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div className="p-4">{children}</div>
|
||
|
|
</section>
|
||
|
|
)
|
||
|
|
}
|