Code Block

1"use client"
2 
3import { cn } from "@/lib/utils"
4import React, { useEffect, useState } from "react"
5import { codeToHtml } from "shiki"
6 
7export type CodeBlockProps = {
8  children?: React.ReactNode
9  className?: string
10} & React.HTMLProps<HTMLDivElement>
11 
12function CodeBlock({ children, className, ...props }: CodeBlockProps) {
13  return (
14    <div
15      className={cn(
16        "not-prose flex w-full flex-col overflow-clip border",
17        "border-border bg-card text-card-foreground rounded-xl",
18        className
19      )}
20      {...props}
21    >
22      {children}
23    </div>
24  )
25}
26 
27export type CodeBlockCodeProps = {
28  code: string
29  language?: string
30  theme?: string
31  className?: string
32} & React.HTMLProps<HTMLDivElement>
33 
34function CodeBlockCode({
35  code,
36  language = "tsx",
37  theme = "github-light",
38  className,
39  ...props
40}: CodeBlockCodeProps) {
41  const [highlightedHtml, setHighlightedHtml] = useState<string | null>(null)
42 
43  useEffect(() => {
44    async function highlight() {
45      if (!code) {
46        setHighlightedHtml("<pre><code></code></pre>")
47        return
48      }
49 
50      const html = await codeToHtml(code, { lang: language, theme })
51      setHighlightedHtml(html)
52    }
53    highlight()
54  }, [code, language, theme])
55 
56  const classNames = cn(
57    "w-full overflow-x-auto text-[13px] [&>pre]:px-4 [&>pre]:py-4",
58    className
59  )
60 
61  // SSR fallback: render plain code if not hydrated yet
62  return highlightedHtml ? (
63    <div
64      className={classNames}
65      dangerouslySetInnerHTML={{ __html: highlightedHtml }}
66      {...props}
67    />
68  ) : (
69    <div className={classNames} {...props}>
70      <pre>
71        <code>{code}</code>
72      </pre>
73    </div>
74  )
75}
76 
77export type CodeBlockGroupProps = React.HTMLAttributes<HTMLDivElement>
78 
79function CodeBlockGroup({
80  children,
81  className,
82  ...props
83}: CodeBlockGroupProps) {
84  return (
85    <div
86      className={cn("flex items-center justify-between", className)}
87      {...props}
88    >
89      {children}
90    </div>
91  )
92}
93 
94export { CodeBlockGroup, CodeBlockCode, CodeBlock }