Upload components/Documentation.jsx with huggingface_hub

components/Documentation.jsx

@@ -0,0 +1,322 @@
+import Link from 'next/link'
+import { FiBook, FiCode, FiCpu, FiServer, FiDatabase, FiCloud } from 'react-icons/fi'
+import { useState } from 'react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
+export default function Documentation() {
+  const [activeSection, setActiveSection] = useState('getting-started')
+  const [searchTerm, setSearchTerm] = useState('')
+
+  const docs = [
+    {
+      id: 'getting-started',
+      title: 'Getting Started',
+      icon: <FiBook />,
+      content: `
+# Getting Started with FullStack Programming Hub
+
+## Installation
+
+To get started with our platform, follow these simple steps:
+
+1. **Clone the repository**:
+   \`\`\`bash
+   git clone https://github.com/your-repo/fullstack-hub.git
+   cd fullstack-hub
+   \`\`\`
+
+2. **Install dependencies**:
+   \`\`\`bash
+   yarn install
+   \`\`\`
+
+3. **Run the development server**:
+   \`\`\`bash
+   yarn dev
+   \`\`\`
+
+## System Requirements
+
+- Node.js 18+
+- yarn or npm
+- 4GB RAM minimum (8GB recommended for AI models)
+- 10GB free disk space
+
+## First Steps
+
+1. Launch the code editor
+2. Select your preferred programming language
+3. Start coding with AI assistance
+4. Run and test your code
+      `,
+      link: '/docs/getting-started'
+    },
+    {
+      id: 'code-editor',
+      title: 'Code Editor Guide',
+      icon: <FiCode />,
+      content: `
+# Code Editor Features
+
+## Supported Languages
+
+- JavaScript/TypeScript
+- Python
+- Java
+- C#
+- Go
+- Rust
+- 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'
+    },
+    {
+      id: 'model-integration',
+      title: 'Model Integration',
+      icon: <FiCpu />,
+      content: `
+# AI Model Integration
+
+## Available Models
+
+1. **CodeGen 2B**: Python/JavaScript code generation
+2. **StableCode**: Multi-language code completion
+3. **DeepSeek Coder**: Advanced code understanding
+
+## Integration Steps
+
+1. **Download the model** from the Models page
+2. **Initialize in your code**:
+   \`\`\`javascript
+   const model = require('@fullstack-hub/codegen')
+   const instance = new model({ temperature: 0.7 })
+   \`\`\`
+
+3. **Use the model**:
+   \`\`\`javascript
+   const result = await instance.generate('Write a React component')
+   \`\`\`
+
+## Best Practices
+
+- Use lower temperatures (0.2-0.5) for more deterministic outputs
+- Higher temperatures (0.7-1.0) for more creative outputs
+- Limit max tokens to control response length
+      `,
+      link: '/docs/models'
+    },
+    {
+      id: 'offline-development',
+      title: 'Offline Development',
+      icon: <FiDatabase />,
+      content: `
+# Offline Development Guide
+
+## Setting Up Offline Mode
+
+1. Download required models
+2. Configure local storage paths
+3. Enable offline mode in settings
+
+## Benefits
+
+- Work without internet connection
+- Faster response times
+- Data privacy and security
+- Reduced API costs
+
+## Limitations
+
+- Model updates require manual download
+- Limited to downloaded models
+- No cloud sync in offline mode
+      `,
+      link: '/docs/offline'
+    },
+    {
+      id: 'backend-integration',
+      title: 'Backend Integration',
+      icon: <FiServer />,
+      content: `
+# Backend Integration
+
+## API Endpoints
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| /api/execute | POST | Execute code |
+| /api/models | GET | List available models |
+| /api/models/download | POST | Download model |
+
+## Example Integration
+
+\`\`\`javascript
+const axios = require('axios')
+
+// Execute code
+const response = await axios.post('/api/execute', {
+  code: 'console.log("Hello")',
+  language: 'javascript'
+})
+
+// Download model
+const model = await axios.post('/api/models/download', {
+  modelId: 1
+})
+\`\`\`
+
+## Authentication
+
+API keys are required for production use. Get your key from the account settings.
+      `,
+      link: '/docs/backend'
+    },
+    {
+      id: 'deployment',
+      title: 'Deployment Guide',
+      icon: <FiCloud />,
+      content: `
+# Deployment Options
+
+## Docker Deployment
+
+1. Build the image:
+   \`\`\`bash
+   docker build -t fullstack-hub .
+   \`\`\`
+
+2. Run the container:
+   \`\`\`bash
+   docker run -p 3000:3000 fullstack-hub
+   \`\`\`
+
+## Cloud Platforms
+
+### Vercel
+1. Connect your GitHub repository
+2. Configure environment variables
+3. Deploy with one click
+
+### AWS
+1. Create an EC2 instance
+2. Install Docker
+3. Run the container
+
+## Environment Variables
+
+| Variable | Description | Required |
+|----------|-------------|----------|
+| NODE_ENV | production/development | Yes |
+| PORT | Server port | No (default: 3000) |
+| API_KEY | For external services | Optional |
+      `,
+      link: '/docs/deployment'
+    }
+  ]
+
+  const filteredDocs = docs.filter(doc =>
+    doc.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    doc.content.toLowerCase().includes(searchTerm.toLowerCase())
+  )
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+      <div className="lg:col-span-1">
+        <div className="bg-white rounded-lg shadow-md p-4 sticky top-24">
+          <div className="relative mb-4">
+            <FiSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
+            <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>
+  )
+}