Tree Code Viewer

"use client";

import TreeCodeViewer from "@/components/ui/tree-code-viewer";

function highlight(code: string) {
  const escaped = code
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;");
  const tokens = escaped
    .replace(/('[^']*'|"[^"]*")/g, '<span style="color:#a5d6ff">$1</span>')
    .replace(
      /\b(import|from|export|function|const|let|return|type|interface|default)\b/g,
      '<span style="color:#ff7b72">$1</span>',
    );
  return `<pre style="background-color:#0d1117;color:#e6edf3;margin:0;padding:16px;overflow:auto;font-size:13px;line-height:1.6;font-family:ui-monospace,SFMono-Regular,Menlo,monospace"><code>${tokens}</code></pre>`;
}

const raw = {
  button: `import { cn } from '@/lib/utils';\n\ntype ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport function Button({ className, ...props }: ButtonProps) {\n  return (\n    <button\n      className={cn('rounded-md bg-primary px-4 py-2 text-primary-foreground', className)}\n      {...props}\n    />\n  );\n}`,
  input: `import { cn } from '@/lib/utils';\n\nexport function Input(props: React.InputHTMLAttributes<HTMLInputElement>) {\n  return (\n    <input\n      className={cn('h-9 w-full rounded-md border px-3 text-sm')}\n      {...props}\n    />\n  );\n}`,
  page: `import { Button } from '@/components/ui/button';\n\nexport default function Page() {\n  return (\n    <main className='p-6'>\n      <Button>Click me</Button>\n    </main>\n  );\n}`,
  utils: `import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}`,
  pkg: `{\n  "name": "my-app",\n  "version": "1.0.0",\n  "dependencies": {\n    "react": "^19.0.0",\n    "motion": "^12.0.0"\n  }\n}`,
};

const files = [
  {
    id: "button",
    fileName: "button.tsx",
    virtualPath: ["components", "ui"],
    ext: "tsx",
    raw: raw.button,
    html: highlight(raw.button),
  },
  {
    id: "input",
    fileName: "input.tsx",
    virtualPath: ["components", "ui"],
    ext: "tsx",
    raw: raw.input,
    html: highlight(raw.input),
  },
  {
    id: "page",
    fileName: "page.tsx",
    virtualPath: ["components"],
    ext: "tsx",
    raw: raw.page,
    html: highlight(raw.page),
  },
  {
    id: "utils",
    fileName: "utils.ts",
    virtualPath: ["lib"],
    ext: "ts",
    raw: raw.utils,
    html: highlight(raw.utils),
  },
  {
    id: "pkg",
    fileName: "package.json",
    virtualPath: [],
    ext: "json",
    raw: raw.pkg,
    html: highlight(raw.pkg),
  },
];

export default function TreeCodeViewerDemo() {
  return (
    <div className="mx-auto w-full max-w-4xl p-4">
      <TreeCodeViewer files={files} />
    </div>
  );
}