29 lines
712 B
TypeScript
29 lines
712 B
TypeScript
import type { ReactNode } from "react";
|
|
import { Eyebrow } from "./ui";
|
|
|
|
/**
|
|
* Two-pane layout with a section header.
|
|
* Use `Panel` (from ui/) for single-slot sections. Use this when rendering a primary + secondary pane.
|
|
*/
|
|
export function TwoPaneLayout({
|
|
title,
|
|
eyebrow,
|
|
primary,
|
|
secondary,
|
|
}: {
|
|
title: string;
|
|
eyebrow?: string;
|
|
primary: ReactNode;
|
|
secondary: ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="space-y-14">
|
|
<div>
|
|
{eyebrow ? <Eyebrow className="mb-1">{eyebrow}</Eyebrow> : null}
|
|
<h2 className="text-[20px] font-bold tracking-[-0.025em] text-foreground">{title}</h2>
|
|
</div>
|
|
<div className="space-y-14">{primary}{secondary}</div>
|
|
</div>
|
|
);
|
|
}
|