Reset head ?

slashexx · Nov 4, 2024 · 45481ce · 45481ce
1 parent c8b43fa
commit 45481ce
Showing 1 changed file with 83 additions and 82 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -111,96 +111,97 @@ function App() {
 
       <div className="flex h-[calc(100vh-4rem)]">
         {/* Language Selection Sidebar */}
-        <div className="w-20 bg-gray-800 border-r border-gray-700 p-2 flex flex-col gap-2">
-          {(Object.keys(LANGUAGE_CONFIGS) as Language[]).map((lang) => {
-            const { label, icon, color } = LANGUAGE_CONFIGS[lang];
-            return (
+<div className="w-20 bg-gray-800 border-r border-gray-700 p-2 flex flex-col gap-2">
+  {(Object.keys(LANGUAGE_CONFIGS) as Language[]).map((lang) => {
+    const { label, icon, color } = LANGUAGE_CONFIGS[lang];
+    return (
+      <button
+        key={lang}
+        onClick={() => handleLanguageChange(lang)}
+        className={`p-3 rounded-lg transition-all ${
+          selectedLanguage === lang
+            ? "bg-gray-700 shadow-lg scale-105"
+            : "hover:bg-gray-700/50"
+        } flex flex-col items-center gap-1`}
+      >
+        <i className={`${icon} ${color} text-2xl`} />
+        <span className="text-xs">{label}</span>
+      </button>
+    );
+  })}
+</div>
+
+        </div>
+
+        {/* Main Content */}
+        <div className="flex-1 flex">
+          {/* Editor Section */}
+          <div className="flex-1 border-r border-gray-700">
+            <div className="h-8 bg-gray-800 border-b border-gray-700 flex items-center justify-end gap-2 px-4">
               <button
-                key={lang}
-                onClick={() => handleLanguageChange(lang)}
-                className={`p-3 rounded-lg transition-all ${selectedLanguage === lang
-                    ? "bg-gray-700 shadow-lg scale-105"
-                    : "hover:bg-gray-700/50"
-                  } flex flex-col items-center gap-1`}
+                onClick={handleFormatCode}
+                className="p-1 hover:bg-gray-700 rounded transition-colors"
+                title="Format Code"
               >
-                <i className={`${icon} ${color} text-2xl`} />
-                <span className="text-xs">{label}</span>
+                <Wand2 className="w-4 h-4 text-blue-400" />
               </button>
-            );
-          })}
-        </div>
-
-      </div>
-
-      {/* Main Content */}
-      <div className="flex-1 flex">
-        {/* Editor Section */}
-        <div className="flex-1 border-r border-gray-700">
-          <div className="h-8 bg-gray-800 border-b border-gray-700 flex items-center justify-end gap-2 px-4">
-            <button
-              onClick={handleFormatCode}
-              className="p-1 hover:bg-gray-700 rounded transition-colors"
-              title="Format Code"
-            >
-              <Wand2 className="w-4 h-4 text-blue-400" />
-            </button>
-            <button
-              onClick={handleResetCode}
-              className="p-1 hover:bg-gray-700 rounded transition-colors"
-              title="Reset Code"
-            >
-              <RotateCcw className="w-4 h-4 text-yellow-400" />
-            </button>
-          </div>
-          <div className="h-[calc(100%-2rem)]">
-            <Editor
-              height="100%"
-              defaultLanguage={selectedLanguage}
-              language={selectedLanguage}
-              value={code}
-              onChange={(value) => setCode(value || "")}
-              theme="vs-dark"
-              onMount={(editor) => setEditorInstance(editor)}
-              options={{
-                minimap: { enabled: false },
-                fontSize: 14,
-                padding: { top: 16 },
-                scrollBeyondLastLine: false,
-                suggestOnTriggerCharacters: true,
-                quickSuggestions: true,
-                snippetSuggestions: "inline",
-                wordBasedSuggestions: "matchingDocuments",
-                parameterHints: {
-                  enabled: true,
-                  cycle: true,
-                },
-                suggest: {
-                  showKeywords: true,
-                  showSnippets: true,
-                  showClasses: true,
-                  showFunctions: true,
-                  showVariables: true,
-                  showWords: true,
-                  showMethods: true,
-                  showProperties: true,
-                },
-              }}
-            />
+              <button
+                onClick={handleResetCode}
+                className="p-1 hover:bg-gray-700 rounded transition-colors"
+                title="Reset Code"
+              >
+                <RotateCcw className="w-4 h-4 text-yellow-400" />
+              </button>
+            </div>
+            <div className="h-[calc(100%-2rem)]">
+              <Editor
+                height="100%"
+                defaultLanguage={selectedLanguage}
+                language={selectedLanguage}
+                value={code}
+                onChange={(value) => setCode(value || "")}
+                theme="vs-dark"
+                onMount={(editor) => setEditorInstance(editor)}
+                options={{
+                  minimap: { enabled: false },
+                  fontSize: 14,
+                  padding: { top: 16 },
+                  scrollBeyondLastLine: false,
+                  suggestOnTriggerCharacters: true,
+                  quickSuggestions: true,
+                  snippetSuggestions: "inline",
+                  wordBasedSuggestions: "matchingDocuments",
+                  parameterHints: {
+                    enabled: true,
+                    cycle: true,
+                  },
+                  suggest: {
+                    showKeywords: true,
+                    showSnippets: true,
+                    showClasses: true,
+                    showFunctions: true,
+                    showVariables: true,
+                    showWords: true,
+                    showMethods: true,
+                    showProperties: true,
+                  },
+                }}
+              />
+            </div>
           </div>
-        </div>
 
-        {/* Output Section */}
-        <div className="w-[40%] bg-gray-800 flex flex-col">
-          <div className="h-8 bg-gray-800 border-b border-gray-700 flex items-center px-4">
-            <h2 className="font-semibold">Output</h2>
-          </div>
-          <div className="flex-1 p-4 font-mono text-sm overflow-auto bg-gray-900 m-2 rounded-lg">
-            <pre>{output}</pre>
+          {/* Output Section */}
+          <div className="w-[40%] bg-gray-800 flex flex-col">
+            <div className="h-8 bg-gray-800 border-b border-gray-700 flex items-center px-4">
+              <h2 className="font-semibold">Output</h2>
+            </div>
+            <div className="flex-1 p-4 font-mono text-sm overflow-auto bg-gray-900 m-2 rounded-lg">
+              <pre>{output}</pre>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-
+    // </div>
   );
 }