code-block

1import * as React from "react";
2import { codeToHtml } from "shiki";
3import fs from "fs";
4import path from "path";
5import { CopyButton } from "./copy-button";
6 
7interface CodeBlockProps {
8  fileName?: string; // If provided, it reads this file from src/registry/
9  code?: string;     // If provided, it just highlights this string
10  language?: string;
11}
12 
13export async function CodeBlock({ fileName, code, language = "tsx" }: CodeBlockProps) {
14  let codeString = code || "";
15 
16  // Try multiple source folders so migrated docs/components can still show code.
17  if (fileName) {
18    const candidates = [
19      path.join(process.cwd(), "src", "registry", fileName),
20      path.join(process.cwd(), "src", "components", "ui", fileName),
21      path.join(process.cwd(), "src", "components", "docs", fileName),
22      path.join(process.cwd(), "src", "components", "docs", "Fliptext-examples", fileName),
23    ];
24 
25    try {
26      const existingFilePath = candidates.find((candidatePath) => fs.existsSync(candidatePath));
27 
28      if (!existingFilePath) {
29        throw new Error("No matching source file found");
30      }
31 
32      codeString = fs.readFileSync(existingFilePath, "utf8");
33    } catch (e) {
34      codeString = `// Error reading file: ${fileName}\n// Looked in src/registry, src/components/ui, and src/components/docs`;
35    }
36  }
37 
38  // Convert the raw React code to styled HTML using Shiki
39  const html = await codeToHtml(codeString, {
40    lang: language,
41    theme: "github-dark-dimmed", // Sleek, dark theme perfect for VengeanceUI
42  });
43 
44  return (
45    <div className="relative rounded-xl bg-[#22272e] border border-white/10 overflow-hidden my-6 shadow-2xl">
46      {/* Header bar with filename and copy button */}
47      <div className="flex items-center justify-between px-4 py-2 bg-[#1c2128] border-b border-white/5">
48        <span className="text-xs font-mono text-zinc-400">
49          {fileName || "code"}
50        </span>
51        <CopyButton code={codeString} />
52      </div>
53      
54      {/* The beautifully highlighted code */}
55      <div 
56        className="p-4 overflow-x-auto text-sm [&>pre]:!bg-transparent"
57        dangerouslySetInnerHTML={{ __html: html }}
58      />
59    </div>
60  );
61}