Open History to see the last commit
1import type { ReactNode } from "react";
2
3import { Text } from "~/components/ui/text";
4
5/**
6 * A dim meta heading over a group of content, such as "Local servers" above a
7 * list of server cards. The section owns the heading and the gap below it;
8 * callers pass the label and the content.
9 */
10export function LabeledSection({
11 label,
12 children,
13}: {
14 readonly label: ReactNode;
15 readonly children: ReactNode;
16}) {
17 return (
18 <section className="flex flex-col gap-2">
19 <Text variant="meta" tone="dim" render={<h3 />}>
20 {label}
21 </Text>
22 {children}
23 </section>
24 );
25}