Code Block

1import { codeToHtml } from "shiki"
2 
3import { cn } from "@/lib/utils"
4import { CopyButton } from "@/registry/aqua/ui/copy-button"
5 
6export async function CodeBlock({
7  code,
8  lang = "tsx",
9  theme = "github-light",
10  className,
11}: {
12  code: string
13  lang?: string
14  theme?: string
15  className?: string
16}) {
17  const html = await codeToHtml(code, { lang, theme })
18 
19  return (
20    <div className={cn("relative", className)}>
21      <div
22        className="overflow-x-auto rounded-xl border border-[#aeb3bc] bg-white shadow-[0_2px_10px_rgba(20,30,50,0.08)] [&_pre]:!bg-transparent [&_pre]:p-5 [&_pre]:font-mono [&_pre]:text-[13px] [&_pre]:leading-6"
23        dangerouslySetInnerHTML={{ __html: html }}
24      />
25      <CopyButton text={code} className="absolute right-3 top-3" />
26    </div>
27  )
28}