@catalystsoftware/ui 1.0.5 → 1.0.6

package/data/code-data.tsx

@@ -1,1040 +0,0 @@
-export const codeData = [
-    {
-        name: "Code Comparison 1",
-        value: "code-comparison1",
-        importPath: "~/components/catalyst-ui/code/code-comparison1",
-        multiImport: null,
-        basicusage: `
-<CodeComparison
-  beforeCode="const x = 1"
-  afterCode="const x = 2"
-  language="javascript"
-  filename="example.js"
-  lightTheme="min-light"
-  darkTheme="min-dark"
-/>
-
-<CodeComparison
-  beforeCode={beforeCode}
-  afterCode={afterCode}
-  language="typescript"
-  filename="component.tsx"
-  lightTheme="github-light"
-  darkTheme="github-dark"
-  highlightColor="#00ff00"
-/>`,
-        path: "/components/catalyst-ui/code/code-comparison1.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/code/code-comparison1.tsx",
-        usage: null,
-        premium: true,
-        category: "Code",
-        tags: ["code", "comparison", "syntax", "highlighting"],
-        features: ["Syntax Highlighting", "Diff View", "Theme Support", "Interactive"],
-        dependencies: ["shiki", "@shikijs/transformers", "lucide-react", "next-themes"],
-        props: {
-            "CodeComparison": [
-                { name: "beforeCode", type: "string", default: "required" },
-                { name: "afterCode", type: "string", default: "required" },
-                { name: "language", type: "string", default: "required" },
-                { name: "filename", type: "string", default: "required" },
-                { name: "lightTheme", type: "string", default: "required" },
-                { name: "darkTheme", type: "string", default: "required" },
-                { name: "highlightColor", type: "string", default: "#ff3333" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Terminal1",
-        value: "terminal1",
-        importPath: "~/components/catalyst-ui/code/terminal-1",
-        multiImport: "Terminal, AnimatedSpan, TypingAnimation",
-        basicusage: null,
-        path: "/components/catalyst-ui/code/terminal-1.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/code/terminal-1.tsx",
-        usage: null,
-        premium: true,
-        category: "Code",
-        tags: ["terminal", "typing", "animation", "code", "console"],
-        features: ["Typing Animation", "Terminal Styling", "Motion Effects", "Customizable Timing"],
-        dependencies: ["motion/react", "react"],
-        props: {
-            "Terminal": [
-                { name: "className", type: "string", default: "null" },
-                { name: "children", type: "ReactNode", default: "null" }
-            ],
-            "AnimatedSpan": [
-                { name: "delay", type: "number", default: "0" },
-                { name: "className", type: "string", default: "null" },
-                { name: "children", type: "ReactNode", default: "null" }
-            ],
-            "TypingAnimation": [
-                { name: "children", type: "string", default: "null" },
-                { name: "className", type: "string", default: "null" },
-                { name: "duration", type: "number", default: "60" },
-                { name: "delay", type: "number", default: "0" },
-                { name: "as", type: "React.ElementType", default: "span" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Sandbox2",
-        value: "sandbox2",
-        importPath: "~/components/catalyst-ui/code/sandbox",
-        multiImport: "SandboxTabs2, SandboxTabsList2, SandboxTabsTrigger2, SandboxTabsContent2, SandboxFileExplorer2, SandboxCodeEditor2, SandboxPreview2, SandboxConsole2",
-        basicusage: `<SandboxTabs2 defaultValue="editor">
-  <SandboxTabsList2>
-    <SandboxTabsTrigger2 value="editor">Editor</SandboxTabsTrigger>
-    <SandboxTabsTrigger2 value="preview">Preview</SandboxTabsTrigger>
-  </SandboxTabsList2>
-  <SandboxTabsContent2 value="editor">
-    <SandboxCodeEditor2 value={code} onChange={setCode} />
-  </SandboxTabsContent2>
-  <SandboxTabsContent2 value="preview">
-    <SandboxPreview srcDoc={code} />
-  </SandboxTabsContent2>
-</SandboxTabs2>`,
-        path: "/components/catalyst-ui/code/sandbox2.tsx",
-        source: null,
-        usagePath: null,
-        usage: `
-export function SandboxDemo2() {
-  const [activeFile, setActiveFile] = useState('index.html');
-  const [code, setCode] = useState(\`<!DOCTYPE html>
-<html>
-<head>
-  <title>Preview</title>
-</head>
-<body>
-  <h1>Hello World</h1>
-  <p>Edit the code to see changes</p>
-</body>
-</html>\`);
-
-  const files = ['index.html', 'styles.css', 'script.js'];
-
-  return (
-	<div className="mx-auto max-w-6xl p-6">
-	  <SandboxTabs2 defaultValue="editor" className="h-[600px]">
-		<SandboxTabsList2>
-		  <SandboxTabsTrigger2 value="editor">Editor</SandboxTabsTrigger2>
-		  <SandboxTabsTrigger2 value="preview">Preview</SandboxTabsTrigger2>
-		  <SandboxTabsTrigger2 value="console">Console</SandboxTabsTrigger2>
-		</SandboxTabsList2>
-		
-		<SandboxTabsContent2 value="editor" className="flex">
-		  <SandboxFileExplorer2
-			files={files}
-			activeFile={activeFile}
-			onFileSelect={setActiveFile}
-			className="w-48 border-r"
-		  />
-		  <SandboxCodeEditor2
-			value={code}
-			onChange={setCode}
-			language="html"
-			className="flex-1"
-		  />
-		</SandboxTabsContent2>
-
-		<SandboxTabsContent2 value="preview">
-		  <SandboxPreview2 srcDoc={code} />
-		</SandboxTabsContent2>
-
-		<SandboxTabsContent2 value="console">
-		  <SandboxConsole2
-			logs={[
-			  { type: 'log', message: 'Application started' },
-			  { type: 'warn', message: 'This is a warning' },
-			]}
-		  />
-		</SandboxTabsContent2>
-	  </SandboxTabs2>
-	</div>
-  );
-}`,
-        premium: true,
-        category: "Code",
-        tags: ["code", "editor", "preview", "sandbox"],
-        features: ["Responsive", "TypeScript", "Accessible"],
-        dependencies: ["react"],
-        props: {
-            "SandboxTabs": [
-                { name: "defaultValue", type: "string", default: "null" },
-                { name: "value", type: "string", default: "null" },
-                { name: "onValueChange", type: "(value: string) => void", default: "null" },
-                { name: "className", type: "string", default: "null" },
-            ],
-            "SandboxFileExplorer": [
-                { name: "files", type: "string[]", default: "[]" },
-                { name: "activeFile", type: "string", default: "null" },
-                { name: "onFileSelect", type: "(file: string) => void", default: "null" },
-                { name: "className", type: "string", default: "null" },
-            ],
-            "SandboxCodeEditor": [
-                { name: "value", type: "string", default: "" },
-                { name: "onChange", type: "(value: string) => void", default: "null" },
-                { name: "language", type: "string", default: "javascript" },
-                { name: "readOnly", type: "boolean", default: "false" },
-                { name: "className", type: "string", default: "null" },
-            ],
-            "SandboxPreview": [
-                { name: "html", type: "string", default: "null" },
-                { name: "srcDoc", type: "string", default: "null" },
-                { name: "className", type: "string", default: "null" },
-            ],
-            "SandboxConsole": [
-                { name: "logs", type: "Array<{ type: 'log' | 'error' | 'warn'; message: string }>", default: "[]" },
-                { name: "className", type: "string", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Code Comparison",
-        value: "code-comparison",
-        importPath: "~/components/catalyst-ui/components/code-comparison",
-        multiImport: null,
-        basicusage: `
-<CodeComparison
-  beforeCode="console.log('old')"
-  afterCode="console.log('new')"
-  language="javascript"
-  filename="example.js"
-  lightTheme="github-light"
-  darkTheme="github-dark"
-/>
-
-<CodeComparison
-  beforeCode={beforeCode}
-  afterCode={afterCode}
-  language="typescript"
-  filename="middleware.ts"
-  lightTheme="min-light"
-  darkTheme="min-dark"
-  highlightColor="rgba(101, 117, 133, 0.16)"
-/>`,
-        path: "/components/catalyst-ui/components/code-comparison.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/components/code-comparison.tsx",
-        usage: null,
-        premium: true,
-        category: "Code",
-        tags: ["code", "comparison", "syntax", "highlighting"],
-        features: ["Syntax Highlighting", "Diff View", "Theme Support", "TypeScript"],
-        dependencies: ["shiki", "@shikijs/transformers", "lucide-react", "next-themes", "react"],
-        props: {
-            "CodeComparison": [
-                { name: "beforeCode", type: "string", default: "null" },
-                { name: "afterCode", type: "string", default: "null" },
-                { name: "language", type: "string", default: "null" },
-                { name: "filename", type: "string", default: "null" },
-                { name: "lightTheme", type: "string", default: "null" },
-                { name: "darkTheme", type: "string", default: "null" },
-                { name: "highlightColor", type: "string", default: "#ff3333" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Terminal",
-        value: "terminal",
-        importPath: "~/components/catalyst-ui/code/terminal",
-        multiImport: "Terminal, AnimatedSpan, TypingAnimation",
-        basicusage: `
-<Terminal>
-  <TypingAnimation>&gt; npm install</TypingAnimation>
-  <AnimatedSpan className="text-green-500">✔ Dependencies installed</AnimatedSpan>
-  <TypingAnimation>Project ready!</TypingAnimation>
-</Terminal>
-
-<Terminal 
-  sequence={false}
-  startOnView={true}
-  className="w-full max-w-2xl"
->
-  <TypingAnimation delay={500}>&gt; Initializing system...</TypingAnimation>
-  <AnimatedSpan delay={1000} className="text-blue-500">System ready</AnimatedSpan>
-</Terminal>`,
-        path: null,
-        source: null,
-        usagePath: "/components/catalyst-ui/code/terminal.tsx",
-        usage: `
-export function TerminalDemo() {
-  return (
-    <Terminal>
-      <TypingAnimation>&gt; pnpm dlx shadcn@latest init</TypingAnimation>
-
-      <AnimatedSpan className="text-green-500">
-        ✔ Preflight checks.
-      </AnimatedSpan>
-
-      <AnimatedSpan className="text-green-500">
-        ✔ Verifying framework. Found Next.js.
-      </AnimatedSpan>
-
-      <AnimatedSpan className="text-green-500">
-        ✔ Validating Tailwind CSS.
-      </AnimatedSpan>
-
-      <AnimatedSpan className="text-green-500">
-        ✔ Validating alias.
-      </AnimatedSpan>
-
-      <AnimatedSpan className="text-green-500">
-        ✔ Writing components.json.
-      </AnimatedSpan>
-
-      <AnimatedSpan className="text-green-500">
-        ✔ Checking registry.
-      </AnimatedSpan>
-
-      <AnimatedSpan className="text-green-500">
-        ✔ Updating tailwind.config.ts
-      </AnimatedSpan>
-
-      <AnimatedSpan className="text-green-500">
-        ✔ Updating app/globals.css
-      </AnimatedSpan>
-
-      <AnimatedSpan className="text-green-500">
-        ✔ Installing dependencies.
-      </AnimatedSpan>
-
-      <AnimatedSpan className="text-blue-500">
-        <span> Updated 1 file:</span>
-        <span className="pl-2">- lib/utils.ts</span>
-      </AnimatedSpan>
-
-      <TypingAnimation className="text-muted-foreground">
-        Success! Project initialization completed.
-      </TypingAnimation>
-
-      <TypingAnimation className="text-muted-foreground">
-        You may now add components.
-      </TypingAnimation>
-    </Terminal>
-  )
-}
-`,
-        premium: true,
-        category: "Code",
-        tags: ["animation", "typing", "terminal", "sequence"],
-        features: ["Typing Animation", "Sequenced", "Interactive", "TypeScript"],
-        dependencies: ["motion", "react"],
-        props: {
-            "Terminal": [
-                { name: "className", type: "string", default: "null" },
-                { name: "sequence", type: "boolean", default: "true" },
-                { name: "startOnView", type: "boolean", default: "true" }
-            ],
-            "AnimatedSpan": [
-                { name: "className", type: "string", default: "null" },
-                { name: "delay", type: "number", default: "0" },
-                { name: "startOnView", type: "boolean", default: "false" }
-            ],
-            "TypingAnimation": [
-                { name: "className", type: "string", default: "null" },
-                { name: "duration", type: "number", default: "60" },
-                { name: "delay", type: "number", default: "0" },
-                { name: "as", type: "React.ElementType", default: "span" },
-                { name: "startOnView", type: "boolean", default: "true" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Sandbox",
-        value: "sandbox",
-        importPath: "~/components/catalyst-ui/code/sandbox",
-        multiImport: "SandboxTabs, SandboxTabsList, SandboxTabsTrigger, SandboxTabsContent, SandboxCodeEditor, SandboxConsole, SandboxFileExplorer, SandboxLayout, SandboxPreview, SandboxProvider",
-        basicusage: `
-
-
-
-const Example = () => (
-  <SandboxProvider>
-    <SandboxLayout>
-      <SandboxTabs defaultValue="preview">
-        <SandboxTabsList>
-          <SandboxTabsTrigger value="code">
-            <CodeIcon size={14} />
-            Code
-          </SandboxTabsTrigger>
-          <SandboxTabsTrigger value="preview">
-            <AppWindowIcon size={14} />
-            Preview
-          </SandboxTabsTrigger>
-          <SandboxTabsTrigger value="console">
-            <TerminalIcon size={14} />
-            Console
-          </SandboxTabsTrigger>
-        </SandboxTabsList>
-        <SandboxTabsContent className="overflow-hidden" value="code">
-          <ResizablePanelGroup direction="horizontal">
-            <ResizablePanel
-              className="overflow-y-auto"
-              defaultSize={25}
-              maxSize={40}
-              minSize={20}
-            >
-              <SandboxFileExplorer />
-            </ResizablePanel>
-            <ResizableHandle withHandle />
-            <ResizablePanel className="overflow-y-auto">
-              <SandboxCodeEditor />
-            </ResizablePanel>
-          </ResizablePanelGroup>
-        </SandboxTabsContent>
-        <SandboxTabsContent value="preview">
-          <SandboxPreview
-            showOpenInCodeSandbox={false}
-            showRefreshButton={false}
-          />
-        </SandboxTabsContent>
-        <SandboxTabsContent value="console">
-          <SandboxConsole />
-        </SandboxTabsContent>
-      </SandboxTabs>
-    </SandboxLayout>
-  </SandboxProvider>
-);
-export default Example;`,
-        path: "/components/catalyst-ui/code/sandbox-tabs.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/code/sandbox-tabs.tsx",
-        usage: null,
-        premium: true,
-        category: "Code",
-        tags: ["sandbox", "code-editor", "preview", "development"],
-        features: ["Resizable", "TypeScript", "File Explorer", "Console"],
-        dependencies: ["@codesandbox/sandpack-react", "lucide-react", "react"],
-        props: {
-            "SandboxTabs": [
-                { name: "className", type: "string", default: "null" },
-                { name: "variant", type: "default | minimal", default: "default" },
-                { name: "defaultValue", type: "string", default: "null" },
-                { name: "value", type: "string", default: "null" },
-                { name: "onValueChange", type: "(value: string) => void", default: "null" }
-            ],
-            "SandboxTabsList": [
-                { name: "className", type: "string", default: "null" },
-                { name: "variant", type: "default | minimal", default: "default" }
-            ],
-            "SandboxTabsTrigger": [
-                { name: "className", type: "string", default: "null" },
-                { name: "value", type: "string", default: "null" }
-            ],
-            "SandboxTabsContent": [
-                { name: "className", type: "string", default: "null" },
-                { name: "value", type: "string", default: "null" }
-            ],
-            "SandboxProvider": [
-                { name: "className", type: "string", default: "null" },
-                { name: "files", type: "Record<string, string>", default: "{}" },
-                { name: "template", type: "string", default: "react" }
-            ],
-            "SandboxLayout": [
-                { name: "className", type: "string", default: "null" }
-            ],
-            "SandboxCodeEditor": [
-                { name: "showTabs", type: "boolean", default: "false" }
-            ],
-            "SandboxPreview": [
-                { name: "className", type: "string", default: "null" },
-                { name: "showOpenInCodeSandbox", type: "boolean", default: "false" }
-            ],
-            "SandboxConsole": [
-                { name: "className", type: "string", default: "null" }
-            ],
-            "SandboxFileExplorer": [
-                { name: "autoHiddenFiles", type: "boolean", default: "true" },
-                { name: "className", type: "string", default: "null" }
-            ]
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Code Block Section",
-        value: "code-block-section",
-        importPath: "~/components/catalyst-ui/code/code-block-section",
-        multiImport: "CodeBlockSection, CodeBlock, CodeBlockHeader, CodeBlockSelect, CodeBlockSelectTrigger, CodeBlockSelectValue, CodeBlockSelectContent, CodeBlockSelectItem, CodeBlockCopyButton, CodeBlockBody, CodeBlockItem, CodeBlockContent",
-        basicusage: `<CodeBlockSection 
-  data={{
-    language: 'tsx',
-    filename: 'button.tsx', 
-    code: \`function Button({ children }) {
-  return <button>{children}</button>;
-}\`
-  }} 
-/>
-
-<CodeBlockSection   data={[
-    { language: 'tsx', filename: 'button.tsx', code: 'const Button = () => {}' },
-    { language: 'tsx', filename: 'input.tsx', code: 'const Input = () => {}' }
-  ]}
-  defaultOpen={true}
-  variant="default"
-/>`,
-        path: "/components/catalyst-ui/code/code-block-section.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/code/code-block-section.tsx",
-        usage: null,
-        premium: true,
-        category: "Code",
-        tags: ["ui", "components", "code", "syntax-highlighting", "interactive"],
-        features: ["Responsive", "TypeScript", "Accessible", "Collapsible", "Multi-file Support", "Syntax Highlighting"],
-        dependencies: ["lucide-react", "react", "@radix-ui/react-use-controllable-state", "class-variance-authority", "shiki", "motion/react"],
-        props: {
-            "CodeBlockSection": [
-                { name: "data", type: "CodeBlockData | CodeBlockData[]", default: "null" },
-                { name: "className", type: "string", default: "null" },
-                { name: "defaultOpen", type: "boolean", default: "true" },
-                { name: "variant", type: "\"default\" | \"zinc\"", default: "\"default\"" },
-                { name: "showLineNumbers", type: "boolean", default: "true" },
-                { name: "highlightedLines", type: "number[]", default: "[]" },
-                { name: "showDiff", type: "boolean", default: "false" },
-                { name: "focusedLines", type: "number[]", default: "[]" },
-                { name: "highlightedWords", type: "string[]", default: "[]" },
-            ],
-            "CodeBlock": [
-                { name: "data", type: "CodeBlockData[]", default: "null" },
-                { name: "value", type: "string", default: "null" },
-                { name: "defaultValue", type: "string", default: "null" },
-                { name: "onValueChange", type: "(value: string) => void", default: "null" },
-                { name: "header", type: "boolean | ReactNode", default: "true" },
-                { name: "variant", type: "\"default\" | \"zinc\"", default: "\"default\"" },
-                { name: "className", type: "string", default: "null" },
-            ],
-            "CodeBlockData": [
-                { name: "language", type: "string", default: "null" },
-                { name: "filename", type: "string", default: "null" },
-                { name: "code", type: "string", default: "null" },
-            ],
-        },
-        desc: "Note to wise wizards, wise enough to read this. This component covers... virtually every single ",
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Code Editor",
-        value: "code-editor",
-        importPath: "~/components/catalyst-ui/code/code-editor",
-        multiImport: "CodeEditor, CopyButton",
-        basicusage: `<CodeEditor 
-  lang="tsx" 
-  title="component.tsx" 
-  code={\`function Example() {
-  return <div>Hello World</div>;
-}\`}
-/>
-
-<CodeEditor 
-  className="w-[640px] h-[480px]"
-  lang="tsx"
-  title="component.tsx"
-  code={code}
-  duration={15}
-  delay={0.5}
-  cursor={true}
-  copyButton={true}
-  writing={true}
-  header={true}
-  dots={true}
-/>`,
-        path: "/components/catalyst-ui/code/code-editor.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/code/code-editor.tsx",
-        usage: null,
-        premium: true,
-        category: "Code",
-        tags: ["ui", "components", "code", "editor", "animation", "interactive"],
-        features: ["Responsive", "TypeScript", "Accessible", "Animated Typing", "Syntax Highlighting", "Theme Support"],
-        dependencies: ["lucide-react", "react", "motion/react", "shiki"],
-        props: {
-            "CodeEditor": [
-                { name: "code", type: "string", default: "null" },
-                { name: "lang", type: "string", default: "null" },
-                { name: "title", type: "string", default: "null" },
-                { name: "className", type: "string", default: "null" },
-                { name: "themes", type: "{ light: string; dark: string }", default: "{ light: 'github-light', dark: 'github-dark' }" },
-                { name: "duration", type: "number", default: "15" },
-                { name: "delay", type: "number", default: "0.5" },
-                { name: "header", type: "boolean", default: "true" },
-                { name: "dots", type: "boolean", default: "true" },
-                { name: "icon", type: "React.ReactNode", default: "<Code />" },
-                { name: "cursor", type: "boolean", default: "true" },
-                { name: "inView", type: "boolean", default: "false" },
-                { name: "inViewMargin", type: "string", default: "\"0px\"" },
-                { name: "inViewOnce", type: "boolean", default: "true" },
-                { name: "copyButton", type: "boolean", default: "true" },
-                { name: "writing", type: "boolean", default: "true" },
-                { name: "onDone", type: "() => void", default: "null" },
-                { name: "onCopy", type: "(content: string) => void", default: "null" },
-            ],
-            "CopyButton": [
-                { name: "content", type: "string", default: "null" },
-                { name: "size", type: "\"sm\" | \"default\" | \"lg\"", default: "\"default\"" },
-                { name: "variant", type: "\"default\" | \"ghost\" | \"outline\"", default: "\"default\"" },
-                { name: "className", type: "string", default: "null" },
-                { name: "onCopy", type: "(content: string) => void", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Code Section",
-        value: "code-section",
-        importPath: "~/components/catalyst-ui/code/code-section",
-        multiImport: null,
-        basicusage: `<Code>console.log('Hello World')</Code>
-
-<Code variant="primary">const x = 42</Code>
-
-<Code variant="success" className="text-lg">
-  success()
-</Code>`,
-        path: "/components/catalyst-ui/code/code-section.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/code/code-section.tsx",
-        usage: null,
-        premium: true,
-        category: "Code",
-        tags: ["ui", "components", "code", "typography", "inline"],
-        features: ["Responsive", "TypeScript", "Accessible", "Multiple Variants"],
-        dependencies: ["react"],
-        props: {
-            "Code": [
-                { name: "children", type: "React.ReactNode", default: "null" },
-                { name: "variant", type: "\"default\" | \"muted\" | \"primary\" | \"secondary\" | \"destructive\" | \"success\" | \"warning\" | \"info\"", default: "\"default\"" },
-                { name: "className", type: "string", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Css Section",
-        value: "css-section",
-        importPath: "~/components/catalyst-ui/code/css-section",
-        multiImport: null,
-        basicusage: `<CssSection 
-  code={\`
-.container {
-  display: flex;
-  width: 100%;
-}
-\`}
-  title="styles.css"
-/>
-
-<CssSection 
-  code={cssCode}
-  title="Custom Styles"
-  note="These styles define the main layout components."
-  noteItems={[
-    "Responsive design included",
-    "Uses CSS Grid and Flexbox",
-    "Dark mode support"
-  ]}
-/>`,
-        path: "/components/catalyst-ui/code/css-section.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/code/css-section.tsx",
-        usage: null,
-        premium: true,
-        category: "Code",
-        tags: ["ui", "components", "code", "css", "syntax-highlighting", "documentation"],
-        features: ["Responsive", "TypeScript", "Syntax Highlighting", "Copy to Clipboard", "Export Functionality"],
-        dependencies: ["react", "lucide-react"],
-        props: {
-            "CssSection": [
-                { name: "code", type: "string", default: "null" },
-                { name: "title", type: "string", default: "\"tailwind\"" },
-                { name: "note", type: "string", default: "null" },
-                { name: "noteItems", type: "string[]", default: "null" },
-                { name: "icon", type: "React.ReactNode", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Html Section",
-        value: "html-section",
-        importPath: "~/components/catalyst-ui/code/html-section",
-        multiImport: null,
-        basicusage: `<Html 
-  code={\`<div class="container">
-  <h1>Hello World</h1>
-  <p>Welcome to my website</p>
-</div>\`}
-  title="example.html"
-/>
-
-<Html 
-  code={htmlCode}
-  title="Component Template"
-  note="This HTML structure uses semantic elements for better accessibility."
-  noteItems={[
-    "Uses semantic HTML5 elements",
-    "Includes ARIA attributes",
-    "Responsive design ready"
-  ]}
-/>`,
-        path: "/components/catalyst-ui/code/html-section.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/code/html-section.tsx",
-        usage: null,
-        premium: true,
-        category: "Code",
-        tags: ["ui", "components", "code", "html", "syntax-highlighting", "documentation"],
-        features: ["Responsive", "TypeScript", "Syntax Highlighting", "Copy to Clipboard", "Export Functionality"],
-        dependencies: ["react", "lucide-react"],
-        props: {
-            "Html": [
-                { name: "code", type: "string", default: "null" },
-                { name: "title", type: "string", default: "\"HTML\"" },
-                { name: "note", type: "string", default: "null" },
-                { name: "noteItems", type: "string[]", default: "null" },
-                { name: "icon", type: "React.ReactNode", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Display Install Code",
-        value: "display-install-code",
-        importPath: "~/components/catalyst-ui/code/display-install-code",
-        multiImport: null,
-        basicusage: `<DisplayInstallCode 
-  title="Install React"
-  libModule="react"
-/>
-
-<DisplayInstallCode 
-  title="Add Dependencies"
-  libModule="@myorg/ui-library"
-  desc="This library provides a complete set of UI components for React applications."
-/>`,
-        path: "/components/catalyst-ui/code/display-install-code.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/code/display-install-code.tsx",
-        usage: null,
-        premium: true,
-        category: "Code",
-        tags: ["ui", "components", "code", "installation", "package-manager", "interactive"],
-        features: ["Responsive", "TypeScript", "Interactive", "Multiple Package Managers", "Copy to Clipboard"],
-        dependencies: ["react", "lucide-react"],
-        props: {
-            "DisplayInstallCode": [
-                { name: "title", type: "string", default: "\"Install\"" },
-                { name: "libModule", type: "string", default: "\"devstack\"" },
-                { name: "desc", type: "string", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Display Install Code Array",
-        value: "display-install-code-array",
-        importPath: "~/components/catalyst-ui/code/display-install-code-array",
-        multiImport: null,
-        basicusage: `<DisplayInstallCodeArray 
-  title="React Dependencies"
-  libModule={['react', 'react-dom', '@types/react']}
-/>
-
-<DisplayInstallCodeArray 
-  title="Development Tools"
-  libModule={['typescript', 'eslint', 'prettier']}
-  desc="Essential development dependencies for modern web development."
-/>`,
-        path: "/components/catalyst-ui/code/display-install-code-array.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/code/display-install-code-array.tsx",
-        usage: null,
-        premium: true,
-        category: "Code",
-        tags: ["ui", "components", "code", "installation", "package-manager", "interactive", "multiple-packages"],
-        features: ["Responsive", "TypeScript", "Interactive", "Multiple Package Managers", "Copy to Clipboard", "Array Support"],
-        dependencies: ["react", "lucide-react"],
-        props: {
-            "DisplayInstallCodeArray": [
-                { name: "title", type: "string", default: "\"Prerequisites\"" },
-                { name: "libModule", type: "string | string[]", default: "[]" },
-                { name: "desc", type: "string", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Display Github Install",
-        value: "display-github-install",
-        importPath: "~/components/catalyst-ui/code/display-github-install",
-        multiImport: null,
-        basicusage: `<DisplayGithubInstall />
-
-<DisplayGithubInstall 
-  title="Download Project"
-  libModule="my-repo"
-  owner="username"
-/>
-
-<DisplayGithubInstall 
-  title="Clone Repository"
-  libModule="awesome-project"
-  owner="organization"
-  desc="Clone this repository to get started with the project setup."
-/>`,
-        path: "/components/catalyst-ui/code/display-github-install.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/code/display-github-install.tsx",
-        usage: null,
-        premium: true,
-        category: "Code",
-        tags: ["ui", "components", "code", "github", "git", "clone", "interactive"],
-        features: ["Responsive", "TypeScript", "Interactive", "Multiple Clone Methods", "Copy to Clipboard"],
-        dependencies: ["react", "lucide-react"],
-        props: {
-            "DisplayGithubInstall": [
-                { name: "title", type: "string", default: "\"Clone\"" },
-                { name: "libModule", type: "string", default: "\"NTRSync-Mobile\"" },
-                { name: "owner", type: "string", default: "\"8an3\"" },
-                { name: "desc", type: "string", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Json Section",
-        value: "json-section",
-        importPath: "~/components/catalyst-ui/code/json-section",
-        multiImport: null,
-        basicusage: `<JsonSection items={configObject} />
-
-<JsonSection 
-  title="Configuration"
-  items={settings}
-  note="This configuration object defines the application settings."
-/>
-
-<JsonSection 
-  title="API Schema"
-  items={apiSchema}
-  noteItems={[
-    "All fields are required unless marked optional",
-    "Dates should be in ISO 8601 format",
-    "Strings have a maximum length of 255 characters"
-  ]}
-  icon={<AlertTriangle className="w-4 h-4 text-yellow-500" />}
-/>`,
-        path: "/components/catalyst-ui/code/json-section.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/code/json-section.tsx",
-        usage: null,
-        premium: true,
-        category: "Code",
-        tags: ["ui", "components", "code", "json", "configuration", "documentation"],
-        features: ["Responsive", "TypeScript", "JSON Formatting", "Copy to Clipboard", "Error Handling"],
-        dependencies: ["react", "lucide-react"],
-        props: {
-            "JsonSection": [
-                { name: "items", type: "any", default: "null" },
-                { name: "title", type: "string", default: "\"Configuration\"" },
-                { name: "note", type: "string", default: "null" },
-                { name: "noteItems", type: "string[]", default: "null" },
-                { name: "icon", type: "React.ReactNode", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Props Code",
-        value: "props-code",
-        importPath: "~/components/catalyst-ui/code/props-code",
-        multiImport: "PropsCode, PropsCopyButton, PropsCopyButtonGroup, AllProps, BasicAllProps",
-        basicusage: `<PropsCode props={componentProps} name="Button" />
-
-<PropsCode 
-  props={{
-    Button: [
-      { name: "variant", type: "string", default: "default" },
-      { name: "size", type: "string", default: "md" }
-    ],
-    ButtonGroup: [
-      { name: "orientation", type: "string", default: "horizontal" }
-    ]
-  }} 
-  name="Button Components"
-/>`,
-        path: "/components/catalyst-ui/code/props-code.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/code/props-code.tsx",
-        usage: null,
-        premium: true,
-        category: "Code",
-        tags: ["ui", "components", "code", "props", "documentation", "interactive"],
-        features: ["Responsive", "TypeScript", "Interactive", "Copy to Clipboard", "Collapsible", "Multiple Components"],
-        dependencies: ["react", "lucide-react"],
-        props: {
-            "PropsCode": [
-                { name: "props", type: "PropDefinition[] | Record<string, PropDefinition[]>", default: "[]" },
-                { name: "name", type: "string", default: "\"Calendar\"" },
-            ],
-            "PropsCopyButton": [
-                { name: "componentName", type: "string", default: "null" },
-                { name: "props", type: "PropDefinition[] | Record<string, PropDefinition[]>", default: "null" },
-                { name: "className", type: "string", default: "null" },
-            ],
-            "PropsCopyButtonGroup": [
-                { name: "componentName", type: "string", default: "null" },
-                { name: "props", type: "PropDefinition[] | Record<string, PropDefinition[]>", default: "null" },
-                { name: "className", type: "string", default: "null" },
-            ],
-            "AllProps": [
-                { name: "props", type: "PropDefinition[] | Record<string, PropDefinition[]>", default: "[]" },
-                { name: "name", type: "string", default: "\"Calendar\"" },
-            ],
-            "BasicAllProps": [
-                { name: "props", type: "PropDefinition[] | Record<string, PropDefinition[]>", default: "[]" },
-                { name: "name", type: "string", default: "\"Calendar\"" },
-            ],
-            "PropDefinition": [
-                { name: "name", type: "string", default: "null" },
-                { name: "type", type: "string", default: "null" },
-                { name: "default", type: "string", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Terminal Code",
-        value: "terminal-code",
-        importPath: "~/components/catalyst-ui/code/terminal-code",
-        multiImport: null,
-        basicusage: `<TerminalCode 
-  title="Install Package"
-  code="react"
-  type="install"
-/>
-
-<TerminalCode 
-  title="Create Project"
-  code="next-app"
-  type="create"
-  desc="Create a new Next.js application with this command."
-/>
-
-<TerminalCode 
-  title="Run Script"
-  code="dev"
-  type="npx"
-/>
-
-<TerminalCode 
-  title="Custom Command"
-  code="git commit -m 'Initial commit'"
-  type="custom"
-/>`,
-        path: "/components/catalyst-ui/code/terminal-code.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/code/terminal-code.tsx",
-        usage: null,
-        premium: true,
-        category: "Code",
-        tags: ["ui", "components", "code", "terminal", "command-line", "interactive"],
-        features: ["Responsive", "TypeScript", "Interactive", "Multiple Package Managers", "Copy to Clipboard", "Multiple Command Types"],
-        dependencies: ["react", "lucide-react"],
-        props: {
-            "TerminalCode": [
-                { name: "title", type: "string", default: "\"Terminal\"" },
-                { name: "code", type: "string", default: "\"devstack\"" },
-                { name: "desc", type: "string", default: "null" },
-                { name: "type", type: "\"install\" | \"create\" | \"npx\" | \"custom\" | \"CustomViewAll\"", default: "\"install\"" },
-                { name: "global", type: "boolean", default: "true" },
-                { name: "code2", type: "any", default: "null" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-    {
-        name: "Tsx Section",
-        value: "tsx-section",
-        importPath: "~/components/catalyst-ui/code/tsx-section",
-        multiImport: null,
-        basicusage: `<TsxSection 
-  code={\`function Example() {
-  return <div>Hello World</div>;
-}\`}
-  title="Component Example"
-/>
-
-<TsxSection 
-  code={typescriptCode}
-  title="TypeScript Interface"
-  note="This interface defines the data structure for our API responses."
-  noteItems={[
-    "All fields are required unless marked optional",
-    "Dates should be in ISO 8601 format",
-    "IDs are auto-generated by the database"
-  ]}
-  icon={<Info className="w-4 h-4 text-blue-500" />}
-/>`,
-        path: "/components/catalyst-ui/code/tsx-section.tsx",
-        source: null,
-        usagePath: "/components/catalyst-ui/code/tsx-section.tsx",
-        usage: null,
-        premium: true,
-        category: "Code",
-        tags: ["ui", "components", "code", "typescript", "react", "documentation"],
-        features: ["Responsive", "TypeScript", "Collapsible", "Copy to Clipboard", "Export Functionality"],
-        dependencies: ["react", "lucide-react"],
-        props: {
-            "TsxSection": [
-                { name: "code", type: "string", default: "null" },
-                { name: "title", type: "string", default: "\"TypeScript Code\"" },
-                { name: "note", type: "string", default: "null" },
-                { name: "noteItems", type: "string[]", default: "null" },
-                { name: "icon", type: "React.ReactNode", default: "null" },
-                { name: "language", type: "string", default: "\"tsx\"" },
-            ],
-        },
-        desc: null,
-        status: null,
-        lastUpdated: null
-    },
-];