shadcn-registry-item-code-block

1"use client";
2 
3import { useEffect, useState, createContext, useContext } from "react";
4import type { RegistryItem } from "shadcn/registry";
5// DynamicCodeBlock is not available, use CodeBlock instead
6import { Button } from "@/components/ui/button";
7import {
8  TreeExpander,
9  TreeIcon,
10  TreeLabel,
11  TreeNode,
12  TreeNodeContent,
13  TreeNodeTrigger,
14  TreeProvider,
15  TreeView,
16} from "@/components/domain-ui/tree";
17import { PanelLeftClose, PanelLeft, FileText, File } from "lucide-react";
18import { CodeBlock, Pre } from "fumadocs-ui/components/codeblock";
19import { type ComponentProps, useMemo } from "react";
20import { cn } from "@/lib/utils";
21import { DynamicCodeBlock } from "fumadocs-ui/components/dynamic-codeblock";
22 
23interface FileData {
24  path: string;
25  content?: string;
26}
27 
28interface FileTreeNode {
29  path: string;
30  type: "file" | "directory";
31  children?: FileTreeNode[];
32  content?: string;
33}
34 
35interface FileSelectionContextValue {
36  selectedFilePath: string;
37  setSelectedFilePath: (path: string) => void;
38}
39 
40const FileSelectionContext = createContext<FileSelectionContextValue | null>(
41  null
42);
43 
44function useFileSelection() {
45  const context = useContext(FileSelectionContext);
46  if (!context) {
47    throw new Error(
48      "useFileSelection must be used within FileSelectionProvider"
49    );
50  }
51  return context;
52}
53 
54// FilePath component - displays file path
55interface FilePathProps {
56  filePath?: string;
57}
58 
59function FilePath({ filePath }: FilePathProps) {
60  if (!filePath) {
61    return null;
62  }
63 
64  return (
65    <div className="bg-muted/10">
66      <div className="flex h-12 items-center gap-2 border-b px-3">
67        <FileText className="h-3 w-3" />
68        <span className="text-muted-foreground text-sm">{filePath}</span>
69      </div>
70    </div>
71  );
72}
73 
74// FileContent component - displays file content
75interface FileContentProps {
76  files: FileData[];
77}
78 
79function pre(props: ComponentProps<"pre">) {
80  return (
81    <CodeBlock {...props} className={cn("my-0 rounded-none", props.className)}>
82      <Pre>{props.children}</Pre>
83    </CodeBlock>
84  );
85}
86 
87function FileContent({ files }: FileContentProps) {
88  const { selectedFilePath } = useFileSelection();
89 
90  const options = useMemo(
91    () => ({
92      components: {
93        pre,
94      },
95      themes: {
96        light: "github-light",
97        dark: "github-dark",
98      },
99    }),
100    []
101  );
102 
103  const selectedFile = files.find((file) => file.path === selectedFilePath);
104 
105  if (!selectedFile) {
106    return (
107// … truncated