4e: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"] 4f: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"] 50:T21cc,"use client" import * as React from "react" import { CheckIcon, CopyIcon, TerminalIcon } from "lucide-react" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { cn } from "@/lib/utils" export type CodeBlockLanguage = | "tsx" | "ts" | "jsx" | "js" | "json" | "css" | "bash" | "python" | "curl" | "text" export type CodeBlockSnippet = { language: CodeBlockLanguage label?: string code: string } export type CodeBlockProps = { code?: string language?: CodeBlockLanguage snippets?: CodeBlockSnippet[] defaultLanguage?: CodeBlockLanguage label?: string showLineNumbers?: boolean allowLanguageSelection?: boolean className?: string contentClassName?: string } const languageLabels: Record = { tsx: "TSX", ts: "TypeScript", jsx: "JSX", js: "JavaScript", json: "JSON", css: "CSS", bash: "Shell", python: "Python", curl: "cURL", text: "Text", } const languageKeywords: Record = { tsx: [ "import", "from", "export", "function", "return", "const", "let", "type", "interface", "extends", "satisfies", "as", ], ts: [ "import", "from", "export", "function", "return", "const", "let", "type", "interface", "extends", "satisfies", "as", ], jsx: ["import", "from", "export", "function", "return", "const", "let"], js: ["import", "from", "export", "function", "return", "const", "let"], json: ["true", "false", "null"], css: [ "display", "grid", "flex", "color", "background", "border", "padding", "margin", ], bash: ["npm", "npx", "pnpm", "bun", "cd", "cp", "ssh", "sudo"], python: [ "import", "from", "def", "return", "if", "else", "for", "in", "with", "as", "True", "False", "None", ], curl: ["curl", "GET", "POST", "PUT", "PATCH", "DELETE"], text: [], } const tokenPattern = /(\/\/.*|#.*|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`(?:\\.|[^`\\])*`|\b[A-Za-z_$][A-Za-z0-9_$-]*\b|\b\d+(?:\.\d+)?\b|[{}()[\].,;:<>/=+\-*|&!])/g function getTokenClass(token: string, language: CodeBlockLanguage) { const keywords = languageKeywords[language] ?? [] if ( token.startsWith("//") || (["bash", "python", "curl"].includes(language) && token.startsWith("#")) ) { return "text-muted-foreground" } if (token.startsWith('"') || token.startsWith("'") || token.startsWith("`")) { return language === "json" ? "text-emerald-700 dark:text-emerald-300" : "text-green-700 dark:text-green-300" } if (keywords.includes(token)) { return "text-sky-700 dark:text-sky-300" } if (language === "json" && /^(true|false|null)$/.test(token)) { return "text-purple-700 dark:text-purple-300" } if (/^\d/.test(token)) { return "text-amber-700 dark:text-amber-300" } if (/^[A-Z]/.test(token) && ["tsx", "jsx", "ts", "js"].includes(language)) { return "text-violet-700 dark:text-violet-300" } if (/^[{}()[\].,;:<>/=+\-*|&!]$/.test(token)) { return "text-muted-foreground" } if (language === "css" && token.startsWith("--")) { return "text-purple-700 dark:text-purple-300" } return "text-foreground" } function highlightLine(line: string, language: CodeBlockLanguage) { const nodes: React.ReactNode[] = [] let cursor = 0 for (const match of line.matchAll(tokenPattern)) { const token = match[0] const index = match.index ?? 0 if (index > cursor) { nodes.push(line.slice(cursor, index)) } nodes.push( {token} ) cursor = index + token.length } if (cursor < line.length) { nodes.push(line.slice(cursor)) } return nodes } function CodeLine({ line, lineNumber, language, showLineNumbers, }: { line: string lineNumber: number language: CodeBlockLanguage showLineNumbers: boolean }) { return (

{showLineNumbers ? ( {lineNumber} ) : null} {highlightLine(line || " ", language)}

) } export function CodeBlock({ code, language = "tsx", snippets, defaultLanguage, label = "Code", showLineNumbers = true, allowLanguageSelection = true, className, contentClassName, }: CodeBlockProps) { const availableSnippets = React.useMemo( () => snippets?.length ? snippets : [ { language, code: code ?? "", }, ], [code, language, snippets] ) const initialLanguage = defaultLanguage ?? availableSnippets[0]?.language ?? language const [activeLanguage, setActiveLanguage] = React.useState(initialLanguage) const [copied, setCopied] = React.useState(false) const activeSnippet = availableSnippets.find((snippet) => snippet.language === activeLanguage) ?? availableSnippets[0] const activeCode = activeSnippet?.code ?? "" const activeLabel = activeSnippet?.label ?? languageLabels[activeSnippet?.language ?? language] const selectable = allowLanguageSelection && availableSnippets.length > 1 async function copyCode() { await navigator.clipboard.writeText(activeCode) setCopied(true) window.setTimeout(() => setCopied(false), 1400) } return (

{label}

{selectable ? ( ) : ( {activeLabel} )}

        
          {activeCode.split("\n").map((line, index) => (
            
          ))}

) } 4d:["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@corr","registryDependencies":["button","select"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/corr/components/code-block.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]