36 lines
816 B
TypeScript
36 lines
816 B
TypeScript
"use client";
|
|
|
|
import { CopyButton } from "@/components/CopyButton";
|
|
import type { StringLiteralUnion } from "shikiji";
|
|
import useSWR from "swr";
|
|
import { highlight } from "../server/highlight";
|
|
|
|
export function CodeBlockClient({
|
|
code,
|
|
lang,
|
|
}: {
|
|
code: string;
|
|
lang: StringLiteralUnion<string>;
|
|
}) {
|
|
const { data } = useSWR(code, async () => {
|
|
return highlight(code.trim(), lang);
|
|
});
|
|
|
|
return (
|
|
<div className="relative w-full text-sm">
|
|
{data && (
|
|
<p
|
|
className="[&>pre]:p-4 rounded-lg max-h-96 overflow-auto w-full"
|
|
style={{
|
|
overflowWrap: "break-word",
|
|
}}
|
|
dangerouslySetInnerHTML={{
|
|
__html: data,
|
|
}}
|
|
/>
|
|
)}
|
|
<CopyButton className="absolute right-2 top-2" text={code} />
|
|
</div>
|
|
);
|
|
}
|