Next.js 16 + TypeScript + Tailwind v4 app with a YAML-driven config system: schema validation (zod), .env interpolation, and a widget registry rendering bookmark/search/group widgets. CSS custom properties (--pn-*) drive theming and are overridable from config.yml's theme.variables. Config load errors surface as a readable error page instead of crashing the app. Hot reload, docker/system/http collectors, and the WebSocket push layer land in later milestones per the approved plan.
19 lines
652 B
TypeScript
19 lines
652 B
TypeScript
import type { Group } from "@/lib/config/schema";
|
|
import { widgetRegistry } from "@/components/widgets/registry";
|
|
|
|
export function GroupSection({ group }: { group: Group }) {
|
|
return (
|
|
<section className="flex flex-col gap-3">
|
|
<h2 className="text-xs font-semibold tracking-wide text-fg-muted uppercase">
|
|
{group.name}
|
|
</h2>
|
|
<div className="grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-3">
|
|
{group.widgets.map((widget, index) => {
|
|
const Component = widgetRegistry[widget.type];
|
|
return <Component key={index} widget={widget as never} />;
|
|
})}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|