section.tsx31 lines · main

1	'use client';
2
3	/**
4	* Command-deck page section: a lowercase mono heading with optional icon,
5	* an optional right-side slot (live badges, links, actions), and generous
6	* spacing between heading and content.
7	*/
8	export function Section({
9	title,
10	icon,
11	right,
12	children,
13	}: {
14	title: string;
15	icon?: React.ReactNode;
16	right?: React.ReactNode;
17	children: React.ReactNode;
18	}) {
19	return (
20	<section className="flex flex-col gap-4">
21	<div className="flex flex-wrap items-center justify-between gap-3">
22	<h2 className="flex items-center gap-2 font-mono text-xs uppercase tracking-wider text-[var(--color-text-subtle)]">
23	{icon ? <span className="text-[var(--color-text-muted)]">{icon}</span> : null}
24	{title}
25	</h2>
26	{right ? <div className="flex items-center gap-2">{right}</div> : null}
27	</div>
28	{children}
29	</section>
30	);
31	}