pr_01m47d24b0e6n91zwymwxg0vpx/apps/web/app/components/trust-page.tsx
| 1 | import type { ReactNode } from "react"; |
| 2 | |
| 3 | /** |
| 4 | * The frame of a trust page (policies, security, support, status): an |
| 5 | * eyebrow, a title, a lede, and the page. Apart from the policies' |
| 6 | * Markdown renderer (legal-doc.tsx), so pages without a policy on them do |
| 7 | * not load it. |
| 8 | */ |
| 9 | export function TrustPage({ |
| 10 | eyebrow, |
| 11 | title, |
| 12 | lede, |
| 13 | aside, |
| 14 | children, |
| 15 | }: { |
| 16 | eyebrow: ReactNode; |
| 17 | title: string; |
| 18 | lede?: ReactNode; |
| 19 | aside?: ReactNode; |
| 20 | children: ReactNode; |
| 21 | }) { |
| 22 | return ( |
| 23 | <main className="mx-auto max-w-5xl px-4 py-12 sm:py-16"> |
| 24 | <p className="text-sm font-medium text-accent">{eyebrow}</p> |
| 25 | <h1 className="mt-2 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">{title}</h1> |
| 26 | {lede && <div className="mt-3 max-w-2xl text-muted">{lede}</div>} |
| 27 | <div className={aside ? "mt-10 grid gap-10 lg:grid-cols-[minmax(0,1fr)_14rem]" : "mt-10"}> |
| 28 | <div className="min-w-0">{children}</div> |
| 29 | {/* On a phone the page is read top to bottom; its contents would only push it down. */} |
| 30 | {aside && <aside className="hidden lg:block">{aside}</aside>} |
| 31 | </div> |
| 32 | </main> |
| 33 | ); |
| 34 | } |