cmux/web/app/components/code-block.tsx
Lawrence Chen f970cdcf33 Add docs, blog, community pages and polish landing page layout
- Add docs pages (getting-started, changelog, keyboard-shortcuts)
- Add blog, community, and legal pages (privacy, terms, EULA)
- Add site header, footer, download button, and nav components
- Add sitemap and robots.txt generation
- Narrow main page container (max-w-2xl), fix footer positioning
- Switch README feature list to colon style
2026-02-09 23:38:05 -08:00

59 lines
1.6 KiB
TypeScript

import { codeToHtml } from "shiki";
export async function CodeBlock({
children,
title,
lang,
variant = "code",
}: {
children: string;
title?: string;
lang?: string;
variant?: "code" | "ascii";
}) {
const lineHeightClass =
variant === "ascii" ? "leading-[1.15]" : "leading-[1.45]";
if (lang && variant !== "ascii") {
const html = await codeToHtml(children, {
lang,
themes: { light: "github-light", dark: "github-dark" },
defaultColor: false,
});
return (
<div className="mb-4">
{title && (
<div className="text-[11px] font-mono text-muted px-4 py-1.5 bg-code-bg border border-border border-b-0 rounded-t-lg">
{title}
</div>
)}
<div
className={`[&_pre]:bg-code-bg [&_pre]:border [&_pre]:border-border [&_pre]:px-4 [&_pre]:py-3 [&_pre]:overflow-x-auto [&_pre]:text-[13px] [&_pre]:${lineHeightClass} [&_pre]:font-mono ${
title
? "[&_pre]:rounded-b-lg [&_pre]:border-t-0"
: "[&_pre]:rounded-lg"
} [&_code]:bg-transparent [&_code]:p-0`}
dangerouslySetInnerHTML={{ __html: html }}
/>
</div>
);
}
return (
<div className="mb-4">
{title && (
<div className="text-[11px] font-mono text-muted px-4 py-1.5 bg-code-bg border border-border border-b-0 rounded-t-lg">
{title}
</div>
)}
<pre
className={`bg-code-bg border border-border px-4 py-3 overflow-x-auto text-[13px] ${lineHeightClass} font-mono ${
title ? "rounded-b-lg" : "rounded-lg"
}`}
>
<code>{children}</code>
</pre>
</div>
);
}