julian
49df2015c8
Add tailwindcss (Bloomberg-terminal theme in index.css), @tanstack/react-query + react-router, zustand, and Radix primitives. Router with role-guarded routes; QueryClient wrapping the existing apiFetch; a small Zustand live store fed by a /api/ws client that invalidates Query caches. Booth screen: live occupancy gauge + streaming entry/exit/payment feed. Vite proxies the WS upgrade. Note: BoothScreen references the pay/exit modal + active-sessions panel added in following commits; final HEAD builds.
34 lines
991 B
TypeScript
34 lines
991 B
TypeScript
import type { ReactNode } from "react";
|
|
|
|
// Terminal panel: a bordered, titled box — the basic building block of the dense
|
|
// booth layout. Title bar in amber, square corners, subtle layered surfaces.
|
|
|
|
export function Panel({
|
|
title,
|
|
right,
|
|
children,
|
|
className = "",
|
|
}: {
|
|
title?: string;
|
|
/** Optional right-aligned content in the title bar (e.g. a status dot). */
|
|
right?: ReactNode;
|
|
children: ReactNode;
|
|
className?: string;
|
|
}) {
|
|
return (
|
|
<section
|
|
className={`flex flex-col border border-term-border bg-term-panel rounded-term overflow-hidden ${className}`}
|
|
>
|
|
{title && (
|
|
<header className="flex items-center justify-between px-3 py-1.5 bg-term-panel-2 border-b border-term-border">
|
|
<h2 className="m-0 text-[11px] font-semibold uppercase tracking-wider text-term-amber">
|
|
{title}
|
|
</h2>
|
|
{right}
|
|
</header>
|
|
)}
|
|
<div className="flex-1 min-h-0 p-3">{children}</div>
|
|
</section>
|
|
);
|
|
}
|