code-block

1"use client"
2 
3import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react"
4import { Check, Copy } from "lucide-react"
5import { AnimatePresence, motion } from "motion/react"
6 
7import { cn } from "@/lib/utils"
8 
9interface CodeTab {
10  label: string
11  code: string
12  language?: string
13}
14 
15interface CodeBlockProps {
16  tabs?: CodeTab[]
17  code?: string
18  language?: string
19  className?: string
20}
21 
22export function CodeBlock({
23  tabs,
24  code,
25  language = "bash",
26  className,
27}: CodeBlockProps) {
28  const [activeTab, setActiveTab] = useState(0)
29  const [copied, setCopied] = useState(false)
30  const [direction, setDirection] = useState(0)
31  const preRef = useRef<HTMLPreElement>(null)
32  const tabsContainerRef = useRef<HTMLDivElement>(null)
33  const tabRefs = useRef<(HTMLButtonElement | null)[]>([])
34  const [hasOverflow, setHasOverflow] = useState(false)
35  const [indicator, setIndicator] = useState<{
36    left: number
37    width: number
38  } | null>(null)
39 
40  const measureIndicator = useCallback(() => {
41    const container = tabsContainerRef.current
42    const activeEl = tabRefs.current[activeTab]
43 
44    if (!container || !activeEl) {
45      return
46    }
47 
48    const containerRect = container.getBoundingClientRect()
49    const tabRect = activeEl.getBoundingClientRect()
50 
51    setIndicator({
52      left: tabRect.left - containerRect.left,
53      width: tabRect.width,
54    })
55  }, [activeTab])
56 
57  const codeContent = useMemo(() => {
58    if (tabs && tabs.length > 0) {
59      return tabs
60    }
61    if (code) {
62      return [{ label: language, code, language }]
63    }
64    return []
65  }, [tabs, code, language])
66 
67  const currentCode = codeContent[activeTab]?.code || ""
68 
69  // Check overflow when tab changes or content updates
70  // biome-ignore lint/correctness/useExhaustiveDependencies: activeTab is needed to recheck overflow when content changes
71  useLayoutEffect(() => {
72    const checkOverflow = () => {
73      if (preRef.current) {
74        const hasHorizontalOverflow =
75          preRef.current.scrollWidth > preRef.current.clientWidth
76        setHasOverflow(hasHorizontalOverflow)
77      }
78    }
79 
80    checkOverflow()
81    const resizeObserver = new ResizeObserver(checkOverflow)
82    if (preRef.current) {
83      resizeObserver.observe(preRef.current)
84    }
85 
86    return () => {
87      resizeObserver.disconnect()
88    }
89  }, [activeTab])
90 
91  useLayoutEffect(() => {
92    measureIndicator()
93 
94    const resizeObserver = new ResizeObserver(measureIndicator)
95    const container = tabsContainerRef.current
96// … truncated