Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | 1x 34x 14x 9x 34x 3x | import type { ReactNode } from 'react';
import { DocShell } from '@/components/DocShell';
import { HeroSplit } from '@/components/HeroSplit';
import { TabBar } from '@/components/TabBar';
import type { TocItem } from '@/lib/markdown';
/*
* Shared chrome for the dev-only style preview: three tabs (Global Values,
* Components, Page Layouts) in the normal content-page shell (DocShell +
* HeroSplit + TabBar). Global Values is the landing tab at /style-preview.
*/
export const PREVIEW_TABS: { name: string; url: string }[] = [
{ name: 'Global Values', url: '/style-preview' },
{ name: 'Components', url: '/style-preview/components' },
{ name: 'Page Layouts', url: '/style-preview/page-layouts' },
];
export type PreviewTocItem = Omit<TocItem, 'level'>;
/** A previewed section: an h2 (in-page nav target), an optional mono tag line and note. */
export function PreviewSection({
id,
title,
tag,
note,
children,
}: {
id: string;
title: string;
tag?: string;
note?: ReactNode;
children: ReactNode;
}) {
return (
<section id={id} className="style-preview__section">
<h2 className="text-heading-lg">{title}</h2>
{tag && <div className="style-preview__tag">{tag}</div>}
{note && <p className="style-preview__note">{note}</p>}
<div className="style-preview__body">{children}</div>
</section>
);
}
/** Small mono caption labelling a sub-example. */
export function PreviewLabel({ children }: { children: ReactNode }) {
return <div className="style-preview__label">{children}</div>;
}
/** Page shell matching the content pages: HeroSplit heading, preview tabs, in-page nav. */
export function PreviewLayout({
heading,
lead,
current,
toc,
children,
}: {
heading: string;
lead?: string;
current: string;
toc: PreviewTocItem[];
children: ReactNode;
}) {
const tabs = PREVIEW_TABS.map((t) => ({ ...t, active: t.url === current }));
const docToc: TocItem[] = toc.map((t) => ({ ...t, level: 2 }));
return (
<DocShell
toc={docToc}
heading={
<>
<HeroSplit
breadcrumbs={[{ name: 'Style Preview', url: '/style-preview' }]}
title={heading}
description={lead}
/>
<TabBar tabs={tabs} />
</>
}
>
<div className="content-blocks style-preview__notice">
<aside className="callout callout--warning" role="note">
<p>
Internal style-preview page. It ships only under <code>next dev</code> or a build with{' '}
<code>NEXT_PUBLIC_STYLE_PREVIEW=true</code>.
</p>
</aside>
</div>
{children}
</DocShell>
);
}
|