50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T2514,"use client" import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react" import { Check, Copy } from "lucide-react" import { AnimatePresence, motion } from "motion/react" import { cn } from "@/lib/utils" interface CodeTab { label: string code: string language?: string } interface CodeBlockProps { tabs?: CodeTab[] code?: string language?: string className?: string } export function CodeBlock({ tabs, code, language = "bash", className, }: CodeBlockProps) { const [activeTab, setActiveTab] = useState(0) const [copied, setCopied] = useState(false) const [direction, setDirection] = useState(0) const preRef = useRef(null) const tabsContainerRef = useRef(null) const tabRefs = useRef<(HTMLButtonElement | null)[]>([]) const [hasOverflow, setHasOverflow] = useState(false) const [indicator, setIndicator] = useState<{ left: number width: number } | null>(null) const measureIndicator = useCallback(() => { const container = tabsContainerRef.current const activeEl = tabRefs.current[activeTab] if (!container || !activeEl) { return } const containerRect = container.getBoundingClientRect() const tabRect = activeEl.getBoundingClientRect() setIndicator({ left: tabRect.left - containerRect.left, width: tabRect.width, }) }, [activeTab]) const codeContent = useMemo(() => { if (tabs && tabs.length > 0) { return tabs } if (code) { return [{ label: language, code, language }] } return [] }, [tabs, code, language]) const currentCode = codeContent[activeTab]?.code || "" // Check overflow when tab changes or content updates // biome-ignore lint/correctness/useExhaustiveDependencies: activeTab is needed to recheck overflow when content changes useLayoutEffect(() => { const checkOverflow = () => { if (preRef.current) { const hasHorizontalOverflow = preRef.current.scrollWidth > preRef.current.clientWidth setHasOverflow(hasHorizontalOverflow) } } checkOverflow() const resizeObserver = new ResizeObserver(checkOverflow) if (preRef.current) { resizeObserver.observe(preRef.current) } return () => { resizeObserver.disconnect() } }, [activeTab]) useLayoutEffect(() => { measureIndicator() const resizeObserver = new ResizeObserver(measureIndicator) const container = tabsContainerRef.current if (container) { resizeObserver.observe(container) } for (const tab of tabRefs.current) { if (tab) { resizeObserver.observe(tab) } } return () => { resizeObserver.disconnect() } }, [measureIndicator]) const handleCopy = async () => { await navigator.clipboard.writeText(currentCode) setCopied(true) setTimeout(() => setCopied(false), 2000) } const handleTabChange = (index: number) => { setDirection(index > activeTab ? 1 : -1) setActiveTab(index) } if (codeContent.length === 0) return null return (

{/* Tab Bar */} {codeContent.length > 1 && (

{codeContent.map((tab, index) => ( ))} {indicator && (

)} {/* Code Content */}

{/* Copy Button */} {copied ? "Copied" : "Copy"}

 1 ? "rounded-b-2xl" : "rounded-2xl",
            hasOverflow ? "overflow-x-auto" : "overflow-x-hidden",
            hasOverflow && "scrollbar-thin scrollbar-thumb-rounded",
            hasOverflow &&
              "scrollbar-thumb-black/15 hover:scrollbar-thumb-black/20",
            hasOverflow &&
              "dark:scrollbar-thumb-white/20 dark:hover:scrollbar-thumb-white/25",
            hasOverflow && "[&::-webkit-scrollbar]:h-2",
            hasOverflow && "[&::-webkit-scrollbar-thumb]:rounded-full",
            hasOverflow && "[&::-webkit-scrollbar-thumb]:bg-black/15",
            hasOverflow && "[&::-webkit-scrollbar-thumb]:dark:bg-white/20",
            hasOverflow && "[&::-webkit-scrollbar-thumb:hover]:bg-black/20",
            hasOverflow &&
              "[&::-webkit-scrollbar-thumb:hover]:dark:bg-white/25",
            hasOverflow && "[&::-webkit-scrollbar-track]:bg-transparent"
          )}
        >
          
             0 ? 20 : -20,
                filter: "blur(4px)",
              }}
              animate={{
                opacity: 1,
                x: 0,
                filter: "blur(0px)",
              }}
              exit={{
                opacity: 0,
                x: direction > 0 ? -20 : 20,
                filter: "blur(4px)",
              }}
              transition={{
                duration: 0.15,
                ease: "easeOut",
              }}
              className="block font-mono whitespace-pre text-zinc-950 dark:text-zinc-50"
            >
              {currentCode}

) } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@cult-ui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/ui/code-block.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]