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:T2b00,'use client'; import React from 'react'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import { atomDark } from 'react-syntax-highlighter/dist/cjs/styles/prism'; import { Check, Copy, ChevronRight, File, Folder, Terminal, Code2, Download, Maximize2, Settings, } from 'lucide-react'; type CodeBlockProps = { language: string; filename: string; highlightLines?: number[]; breadcrumb?: string[]; showStats?: boolean; theme?: 'dark' | 'light'; } & ( | { code: string; tabs?: never; } | { code?: never; tabs: Array<{ name: string; code: string; language?: string; highlightLines?: number[]; }>; } ); export const CodeBlock = ({ language, filename, code, highlightLines = [], tabs = [], breadcrumb = [], showStats = true, theme = 'dark', }: CodeBlockProps) => { const [copied, setCopied] = React.useState(false); const [activeTab, setActiveTab] = React.useState(0); const [isExpanded, setIsExpanded] = React.useState(false); const tabsExist = tabs.length > 0; const copyToClipboard = async () => { const textToCopy = tabsExist ? tabs[activeTab].code : code; if (textToCopy) { await navigator.clipboard.writeText(textToCopy); setCopied(true); setTimeout(() => setCopied(false), 2000); } }; const downloadCode = () => { const textToDownload = tabsExist ? tabs[activeTab].code : code; const activeFilename = tabsExist ? tabs[activeTab].name : filename; if (textToDownload) { const blob = new Blob([textToDownload], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = activeFilename; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } }; const activeCode = tabsExist ? tabs[activeTab].code : code; const activeLanguage = tabsExist ? tabs[activeTab].language || language : language; const activeHighlightLines = tabsExist ? tabs[activeTab].highlightLines || [] : highlightLines; const getLanguageIcon = (lang: string) => { switch (lang.toLowerCase()) { case 'javascript': case 'jsx': case 'typescript': case 'tsx': return ; case 'bash': case 'shell': return ; default: return ; } }; const getCodeStats = (code: string) => { const lines = code.split('\n').length; const chars = code.length; const words = code.split(/\s+/).filter((word) => word.length > 0).length; return { lines, chars, words }; }; const stats = showStats ? getCodeStats(activeCode || '') : null; return (

{breadcrumb.length > 0 && (

{breadcrumb.map((crumb, index) => ( {crumb} {index < breadcrumb.length - 1 && ( )} ))}

)}

{stats && ( )}

{tabsExist && (

{tabs.map((tab, index) => ( ))}

)} {!tabsExist && filename && (

{getLanguageIcon(language)} {filename}

)}

({ style: { backgroundColor: activeHighlightLines.includes(lineNumber) ? theme === 'dark' ? 'rgba(59, 130, 246, 0.1)' : 'rgba(59, 130, 246, 0.05)' : 'transparent', display: 'block', width: '100%', borderLeft: activeHighlightLines.includes(lineNumber) ? '3px solid #3b82f6' : '3px solid transparent', paddingLeft: '0.5rem', }, })} PreTag='div' > {String(activeCode)}

{showStats && stats && (

{activeLanguage.toUpperCase()} {stats.lines} lines {stats.chars} chars

UTF-8

)}

); }; 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","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"}]]}]}],["$","li","react-syntax-highlighter",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-syntax-highlighter","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":"react-syntax-highlighter"}]]}]}],["$","li","@types/react-syntax-highlighter",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40types%2Freact-syntax-highlighter","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":"@types/react-syntax-highlighter"}]]}]}]]}],["$","$L50",null,{"namespace":"@scrollxui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/codeblock.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]