Upload components/Documentation.jsx with huggingface_hub

components/Documentation.jsx

@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import { FiBook, FiCode, FiCpu, FiServer, FiDatabase, FiCloud } from 'react-icons/fi'
+import { FiBook, FiCode, FiCpu, FiServer, FiDatabase, FiCloud, FiTerminal, FiGitBranch, FiZap } from 'react-icons/fi'
 import { useState } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
@@ -14,16 +14,16 @@ export default function Documentation() {
       title: 'Getting Started',
       icon: <FiBook />,
       content: `
-# Getting Started with FullStack Programming Hub
+# Getting Started with SMH-FULL-CODE
 
 ## Installation
 
-To get started with our platform, follow these simple steps:
+To get started with our VSCode-like IDE, follow these simple steps:
 
 1. **Clone the repository**:
    \`\`\`bash
-   git clone https://github.com/your-repo/fullstack-hub.git
-   cd fullstack-hub
+   git clone https://github.com/your-repo/smh-full-code.git
+   cd smh-full-code
    \`\`\`
 
 2. **Install dependencies**:
@@ -45,21 +45,37 @@ To get started with our platform, follow these simple steps:
 
 ## First Steps
 
-1. Launch the code editor
+1. Launch the IDE
 2. Select your preferred programming language
 3. Start coding with AI assistance
 4. Run and test your code
+5. Use the integrated terminal and debug tools
       `,
       link: '/docs/getting-started'
     },
     {
-      id: 'code-editor',
-      title: 'Code Editor Guide',
+      id: 'ide-features',
+      title: 'IDE Features',
       icon: <FiCode />,
       content: `
-# Code Editor Features
+# SMH-FULL-CODE Features
 
-## Supported Languages
+## VSCode-like Interface
+
+- **Monaco Editor Integration**: Full-featured code editor with syntax highlighting
+- **Multiple Panels**: Editor, Terminal, Debug Console
+- **Keyboard Shortcuts**: Familiar VSCode shortcuts (Ctrl+S, F5, etc.)
+- **Theme Support**: Multiple color themes including VSCode Dark/Light
+
+## Advanced Features
+
+- **Integrated Terminal**: Run commands without leaving the IDE
+- **Debug Console**: Set breakpoints and inspect variables
+- **Snippet Management**: Save and load code snippets
+- **Project Explorer**: File and folder management
+- **AI Integration**: Code completion and suggestions
+
+## Language Support
 
 - JavaScript/TypeScript
 - Python
@@ -67,25 +83,10 @@ To get started with our platform, follow these simple steps:
 - C#
 - Go
 - Rust
+- HTML/CSS
 - And more...
-
-## Keyboard Shortcuts
-
-| Shortcut | Action |
-|----------|--------|
-| Ctrl+S | Save snippet |
-| Ctrl+Enter | Run code |
-| Ctrl+Space | Trigger completion |
-| Ctrl+/ | Toggle comment |
-
-## Advanced Features
-
-- **Monaco Editor Integration**: Full-featured code editor with syntax highlighting
-- **Snippet Management**: Save and load code snippets
-- **Themes**: Multiple color themes available
-- **Font Customization**: Adjust font size and family
       `,
-      link: '/docs/editor'
+      link: '/docs/ide-features'
     },
     {
       id: 'model-integration',
@@ -99,13 +100,14 @@ To get started with our platform, follow these simple steps:
 1. **CodeGen 2B**: Python/JavaScript code generation
 2. **StableCode**: Multi-language code completion
 3. **DeepSeek Coder**: Advanced code understanding
+4. **Offline Models**: For local development without internet
 
 ## Integration Steps
 
 1. **Download the model** from the Models page
 2. **Initialize in your code**:
    \`\`\`javascript
-   const model = require('@fullstack-hub/codegen')
+   const model = require('@smh-full-code/codegen')
    const instance = new model({ temperature: 0.7 })
    \`\`\`
 
@@ -199,12 +201,12 @@ API keys are required for production use. Get your key from the account settings
 
 1. Build the image:
    \`\`\`bash
-   docker build -t fullstack-hub .
+   docker build -t smh-full-code .
    \`\`\`
 
 2. Run the container:
    \`\`\`bash
-   docker run -p 3000:3000 fullstack-hub
+   docker run -p 3000:3000 smh-full-code
    \`\`\`
 
 ## Cloud Platforms
@@ -245,78 +247,4 @@ API keys are required for production use. Get your key from the account settings
             <input
               type="text"
               placeholder="Search docs..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"
-            />
-          </div>
-
-          <h3 className="font-bold text-gray-800 mb-3">Documentation</h3>
-          <ul className="space-y-2">
-            {filteredDocs.map((doc) => (
-              <li key={doc.id}>
-                <button
-                  onClick={() => setActiveSection(doc.id)}
-                  className={`w-full text-left p-2 rounded-lg flex items-center space-x-2 transition-colors ${activeSection === doc.id ? 'bg-primary text-white' : 'text-gray-600 hover:bg-gray-100'}`}
-                >
-                  <span>{doc.icon}</span>
-                  <span>{doc.title}</span>
-                </button>
-              </li>
-            ))}
-          </ul>
-
-          <div className="mt-6 pt-4 border-t border-gray-200">
-            <h4 className="font-medium text-gray-800 mb-2">Additional Resources</h4>
-            <ul className="space-y-2">
-              <li>
-                <Link href="/api-docs" className="text-primary hover:text-blue-600 flex items-center space-x-2">
-                  <FiCode />
-                  <span>API Documentation</span>
-                </Link>
-              </li>
-              <li>
-                <Link href="/examples" className="text-primary hover:text-blue-600 flex items-center space-x-2">
-                  <FiBook />
-                  <span>Code Examples</span>
-                </Link>
-              </li>
-              <li>
-                <Link href="/community" className="text-primary hover:text-blue-600 flex items-center space-x-2">
-                  <FiCpu />
-                  <span>Community Forum</span>
-                </Link>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-
-      <div className="lg:col-span-3">
-        {filteredDocs.map((doc) => (
-          <div key={doc.id} className={`bg-white rounded-lg shadow-md p-6 mb-6 ${activeSection === doc.id ? 'block' : 'hidden'}`}>
-            <div className="flex justify-between items-center mb-4">
-              <h2 className="text-2xl font-bold text-gray-800 flex items-center space-x-2">
-                <span>{doc.icon}</span>
-                <span>{doc.title}</span>
-              </h2>
-              <Link
-                href={doc.link}
-                className="text-primary hover:text-blue-600 flex items-center space-x-1"
-              >
-                <span>View Full Guide</span>
-                <span>→</span>
-              </Link>
-            </div>
-
-            <div className="prose max-w-none">
-              <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                {doc.content}
-              </ReactMarkdown>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
+              value={searchTerm