bolt-new

Running

App Files Files Community

00Boobs00 commited on Jan 25

Commit

4eb5f37

verified ·

1 Parent(s): c6e44b6

Upload pages/index.js with huggingface_hub

Browse files

Files changed (1) hide show

pages/index.js +52 -9

pages/index.js CHANGED Viewed

@@ -5,12 +5,20 @@ import TutorialOverlay from '../components/TutorialOverlay'
 import NodeEditor from '../components/NodeEditor'
 import Toolbar from '../components/Toolbar'
 import PropertiesPanel from '../components/PropertiesPanel'
 import { useTutorial } from '../components/TutorialContext'
 export default function Home() {
   const [showWizard, setShowWizard] = useState(false)
   const [hasSeenWizard, setHasSeenWizard] = useState(true)
   const { isTutorialActive } = useTutorial()
   const [selectedNode, setSelectedNode] = useState(null)
   const [nodes, setNodes] = useState([])
   const [connections, setConnections] = useState([])
@@ -35,6 +43,10 @@ export default function Home() {
     localStorage.setItem('hasSeenSetupWizard', 'true')
   }
   return (
     <>
       <Head>
@@ -43,29 +55,51 @@ export default function Home() {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
-      <div className="flex flex-col h-screen bg-gray-50">
         {/* Header */}
-        <header className="bg-white border-b border-gray-200 px-6 py-3 flex items-center justify-between">
           <div className="flex items-center space-x-4">
-            <h1 className="text-2xl font-bold text-primary-600">NeuroArch Studio</h1>
-            <span className="text-xs text-gray-500">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer" className="text-primary-500 hover:underline">anycoder</a></span>
           </div>
           <div className="flex items-center space-x-3">
             <button
               onClick={() => window.dispatchEvent(new CustomEvent('start-tutorial'))}
-              className="px-4 py-2 text-sm font-medium text-primary-600 bg-primary-50 rounded-lg hover:bg-primary-100 transition-colors"
             >
-              Start Tutorial
             </button>
-            <button className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
-              Export
             </button>
           </div>
         </header>
         {/* Main Content */}
         <div className="flex flex-1 overflow-hidden">
-          <Toolbar />
           <NodeEditor
             nodes={nodes}
             setNodes={setNodes}
@@ -90,6 +124,15 @@ export default function Home() {
         {/* Tutorial Overlay */}
         {isTutorialActive && <TutorialOverlay />}
       </div>
     </>
   )

 import NodeEditor from '../components/NodeEditor'
 import Toolbar from '../components/Toolbar'
 import PropertiesPanel from '../components/PropertiesPanel'
+import CodeExportModal from '../components/CodeExportModal'
 import { useTutorial } from '../components/TutorialContext'
+import { useProject } from '../components/ProjectContext'
+import { useTheme } from '../components/ThemeContext'
+import { Menu, Moon, Sun, Download, BookOpen } from 'lucide-react'
 export default function Home() {
   const [showWizard, setShowWizard] = useState(false)
   const [hasSeenWizard, setHasSeenWizard] = useState(true)
+  const [showExportModal, setShowExportModal] = useState(false)
+  const [sidebarOpen, setSidebarOpen] = useState(false)
   const { isTutorialActive } = useTutorial()
+  const { saveProject } = useProject()
+  const { theme, toggleTheme } = useTheme()
   const [selectedNode, setSelectedNode] = useState(null)
   const [nodes, setNodes] = useState([])
   const [connections, setConnections] = useState([])
     localStorage.setItem('hasSeenSetupWizard', 'true')
   }
+  const handleExport = () => {
+    setShowExportModal(true)
+  }
   return (
     <>
       <Head>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
+      <div className={`flex flex-col h-screen ${theme === 'dark' ? 'bg-gray-900' : 'bg-gray-50'}`}>
         {/* Header */}
+        <header className={`${theme === 'dark' ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'} border-b px-6 py-3 flex items-center justify-between`}>
           <div className="flex items-center space-x-4">
+            <button
+              onClick={() => setSidebarOpen(!sidebarOpen)}
+              className={`p-2 rounded-lg ${theme === 'dark' ? 'text-gray-300 hover:bg-gray-700' : 'text-gray-600 hover:bg-gray-100'} transition-colors lg:hidden`}
+            >
+              <Menu className="w-5 h-5" />
+            </button>
+            <div className="flex items-center space-x-3">
+              <div className="w-8 h-8 bg-gradient-to-br from-primary-500 to-primary-700 rounded-lg flex items-center justify-center">
+                <span className="text-white font-bold text-sm">NA</span>
+              </div>
+              <h1 className="text-2xl font-bold text-primary-600">NeuroArch Studio</h1>
+              <span className="text-xs text-gray-500">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer" className="text-primary-500 hover:underline">anycoder</a></span>
+            </div>
           </div>
           <div className="flex items-center space-x-3">
             <button
               onClick={() => window.dispatchEvent(new CustomEvent('start-tutorial'))}
+              className="px-4 py-2 text-sm font-medium text-primary-600 bg-primary-50 rounded-lg hover:bg-primary-100 transition-colors flex items-center space-x-2"
             >
+              <BookOpen className="w-4 h-4" />
+              <span>Tutorial</span>
             </button>
+            <button
+              onClick={toggleTheme}
+              className={`p-2 rounded-lg ${theme === 'dark' ? 'text-gray-300 hover:bg-gray-700' : 'text-gray-600 hover:bg-gray-100'} transition-colors`}
+            >
+              {theme === 'dark' ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+            </button>
+            <button
+              onClick={handleExport}
+              className="px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 transition-colors flex items-center space-x-2"
+            >
+              <Download className="w-4 h-4" />
+              <span>Export</span>
             </button>
           </div>
         </header>
         {/* Main Content */}
         <div className="flex flex-1 overflow-hidden">
+          <Toolbar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
           <NodeEditor
             nodes={nodes}
             setNodes={setNodes}
         {/* Tutorial Overlay */}
         {isTutorialActive && <TutorialOverlay />}
+        {/* Code Export Modal */}
+        {showExportModal && (
+          <CodeExportModal
+            nodes={nodes}
+            connections={connections}
+            onClose={() => setShowExportModal(false)}
+          />
+        )}
       </div>
     </>
   )