48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
import type { Data } from "@/pages/docs/+data";
|
|
|
|
import { clientOnly } from "vike-react/clientOnly";
|
|
import { useData } from "vike-react/useData";
|
|
import { SSRSnippet } from "./SSRSnippet";
|
|
|
|
const CSRSnippet = clientOnly(() => import("./CSRSnippet"));
|
|
|
|
export function Snippet({
|
|
path,
|
|
language,
|
|
label,
|
|
showLineNumbers,
|
|
}: {
|
|
path: string;
|
|
language: string;
|
|
label?: string;
|
|
showLineNumbers: boolean;
|
|
}) {
|
|
const { snippets } = useData<Data>();
|
|
const snippet = snippets.find((snippet) => snippet.path === path);
|
|
|
|
if (!snippet || !snippet.content) {
|
|
return (
|
|
<div className="bg-red-600/10 p-4 rounded-md flex items-center justify-center">
|
|
<p className="text-red-500 text-center">
|
|
<b className="uppercase">Snippet introuvable</b>
|
|
<br />
|
|
<code>{path}</code>
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const props = {
|
|
language,
|
|
label,
|
|
showLineNumbers,
|
|
children: snippet.content,
|
|
};
|
|
|
|
return (
|
|
<div className="relative group">
|
|
<CSRSnippet {...props} fallback={<SSRSnippet {...props} />} />
|
|
</div>
|
|
);
|
|
}
|