Function Code

www/src/components/mdx/code.tsx:15–68

({
  title,
  language,
  code,
}: {
  title?: string
  language: string
  code: string
})

 */

export async function Code({
  title,
  language,
  code,
}: {
  title?: string
  language: string
  code: string
}) {
  const highlightedCode = await highlightCode(code)

  const Icon =
    language === "bash"
      ? Icons.terminal
      : language === "ts" || language === "tsx"
        ? Icons.typescript
        : () => null

  return (
    <div className="border border-dark-gray rounded-md">
      {title ? (
        <div className="rounded-t-md flex items-center justify-between py-3 px-4 bg-zinc-950/25 border-b border-dark-gray">
          <div className="flex items-center gap-2.5">
            {Icon && <Icon className="grayscale size-4" />}
            <p className="text-sm font-medium text-gray-300">{title}</p>
          </div>
          <CopyButton code={code} />
        </div>
      ) : null}
      <ScrollArea className="">
        <div
          className={cn(
            "relative py-[14px] w-full bg-[#22272e] rounded-md antialiased",
            {
              "rounded-t-none": Boolean(title),
            }
          )}
        >
          {!title && (
            <div className="absolute right-2 top-2">
              <CopyButton code={code} />
            </div>
          )}
          <section
            dangerouslySetInnerHTML={{
              __html: highlightedCode,
            }}
          />
        </div>
        <ScrollBar orientation="horizontal" />
      </ScrollArea>
    </div>
  )
}

async function highlightCode(code: string) {
  const file = await unified()