Improve Performance ⚡

lohitkolluri · Jan 26, 2024 · e670260 · e670260
1 parent 4605460
commit e670260
Show file tree

Hide file tree

Showing 19 changed files with 278 additions and 446 deletions.
diff --git a/.gitignore b/.gitignore
@@ -14,6 +14,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
@@ -23,4 +24,45 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+# ---- VisualStudioCode ----
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
 
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
+
+# ---- macOS ----
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
diff --git a/public/Favicon.png b/public/Favicon.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

diff --git a/src/App.js b/src/App.js
@@ -1,8 +1,13 @@
+import React from "react";
 import "./global.css";
 import Landing from "./components/Landing";
 
 function App() {
-  return <Landing />;
+  return (
+    <>
+      <Landing />
+    </>
+  );
 }
 
 export default App;
diff --git a/src/components/CodeEditorWindow.js b/src/components/CodeEditorWindow.js
@@ -1,7 +1,12 @@
 import React, { useState } from "react";
 import Editor from "@monaco-editor/react";
 
-const CodeEditorWindow = ({ onChange, language = "c", code = "", theme = "light" }) => {
+const HEIGHT = "85vh";
+const WIDTH = "100%";
+
+const editorClasses = "code-editor-overlay rounded-md overflow-hidden w-full h-full shadow-4xl";
+
+const CodeEditorWindow = React.memo(({ onChange, language = "c", code = "", theme = "light" }) => {
   const [value, setValue] = useState(code);
 
   const handleEditorChange = (newValue) => {
@@ -10,10 +15,10 @@ const CodeEditorWindow = ({ onChange, language = "c", code = "", theme = "light"
   };
 
   return (
-    <div className="code-editor-overlay rounded-md overflow-hidden w-full h-full shadow-4xl">
+    <div className={editorClasses}>
       <Editor
-        height="85vh"
-        width="100%"
+        height={HEIGHT}
+        width={WIDTH}
         language={language}
         value={value}
         theme={theme}
@@ -22,6 +27,6 @@ const CodeEditorWindow = ({ onChange, language = "c", code = "", theme = "light"
       />
     </div>
   );
-};
+});
 
 export default CodeEditorWindow;
diff --git a/src/components/CustomInput.js b/src/components/CustomInput.js
@@ -7,12 +7,22 @@ const CustomInput = ({ customInput, setCustomInput }) => {
   };
 
   const inputStyles = {
-    backgroundColor: "#181A1B",
+    backgroundColor: "#181A1B", // Dark background color
+    border: "2px solid #D1D5DB",
+    borderRadius: "0.375rem", // Use rem for better scalability
+    boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 1px rgba(0, 0, 0, 0.1)",
+    padding: "0.5rem 1rem",
+    outline: "none",
+    transition: "box-shadow 0.2s ease-in-out",
+    marginTop: "0.5rem",
+    width: "100%", // Full width
+    boxSizing: "border-box",
+    color: "#e2e8f0", // Light text color
   };
 
   const inputClasses = classnames(
-    "focus:outline-none w-full border-2 border-gray-300 z-10 rounded-md shadow-md px-4 py-2 hover:shadow-lg transition duration-200 mt-2",
-    "bg-white"
+    "focus:outline-none hover:shadow-lg",
+    "bg-[#1E2022]" // Dark background color
   );
 
   return (

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -1,21 +1,46 @@
 import React from "react";
 
 const Footer = () => {
+  const githubLogoUrl = "https://img.icons8.com/color/48/github--v1.png";
+  const websiteLogoUrl = "https://img.icons8.com/color/48/domain.png";
+
+  const footerStyles = {
+    height: "3rem",
+    padding: "0.5rem 1rem",
+    backgroundColor: "#1e2022", // Dark background color
+    color: "#e2e8f0", // Light text color
+    display: "flex",
+    alignItems: "center",
+    fontSize: "0.75rem",
+    borderRadius: "0.5rem",
+  };
+
+  const logoStyles = {
+    width: "2.5rem",
+    height: "auto",
+    marginRight: "0.5rem",
+  };
+
   return (
-    <div className="fixed h-8 bottom-0 px-2 py-1 flex items-center justify-center w-full text-xs text-white bg-[#1e293b]">
-      Built with{" "}
-      <span role="img" aria-label="heart" className="mx-1">
-        ❤️
-      </span>
-      by{" "}
-      <a
-        href="https://lohitkolluri.tech"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-blue-500 font-medium hover:underline"
-      >
-        Lohit Kolluri
-      </a>
+    <div className="fixed bottom-0 w-full flex items-center justify-center">
+      <div className="flex items-center" style={footerStyles}>
+        <a
+          href="https://github.com/lohitkolluri"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="mx-1"
+        >
+          <img src={githubLogoUrl} alt="GitHub Logo" style={logoStyles} />
+        </a>
+        <a
+          href="https://lohitkolluri.tech"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="mx-1"
+        >
+          <img src={websiteLogoUrl} alt="Website Logo" style={logoStyles} />
+        </a>
+      </div>
     </div>
   );
 };

diff --git a/src/components/Landing.js b/src/components/Landing.js
@@ -200,10 +200,10 @@ const Landing = () => {
               disabled={!code}
               className={classnames(
                 "mt-4 border-2",
-                "border-[#8A8275]", // Updated border color
+                "border-[#8A8275]",
                 "border-black z-10 rounded-md shadow-[5px_5px_0px_0px_rgba(0,0,0)] px-4 py-2 hover:shadow transition duration-200",
                 !code ? "opacity-50" : "",
-                "bg-[#181A1B]" // Updated background color
+                "bg-[#181A1B] text-[#C7C3BD] focus:outline-none"
               )}
             >
               {processing ? "Processing..." : "Compile and Execute"}

diff --git a/src/components/LanguagesDropdown.js b/src/components/LanguagesDropdown.js
@@ -3,14 +3,22 @@ import Select from "react-select";
 import { customStyles } from "../constants/customStyles";
 import { languageOptions } from "../constants/languageOptions";
 
-const LanguagesDropdown = ({ onSelectChange }) => (
-  <Select
-    placeholder={`Filter By Category`}
-    options={languageOptions}
-    styles={customStyles}
-    defaultValue={languageOptions[0]}
-    onChange={(selectedOption) => onSelectChange(selectedOption)}
-  />
-);
+const LanguagesDropdown = ({ onSelectChange }) => {
+  const defaultLanguage = languageOptions[0];
+
+  const handleSelectChange = (selectedOption) => {
+    onSelectChange(selectedOption);
+  };
+
+  return (
+    <Select
+      placeholder="Filter By Category"
+      options={languageOptions}
+      styles={customStyles}
+      defaultValue={defaultLanguage}
+      onChange={handleSelectChange}
+    />
+  );
+};
 
 export default LanguagesDropdown;
diff --git a/src/components/OutputDetails.js b/src/components/OutputDetails.js
@@ -1,20 +1,23 @@
 import React from "react";
 
-const OutputDetails = ({ outputDetails }) => {
-  const renderMetric = (label, value) => (
-    <p className="text-sm" key={label}>
-      {`${label}: `}
-      <span className="font-semibold px-2 py-1 rounded-md" style={{ backgroundColor: "#1E2022" }}>
-        {value}
-      </span>
-    </p>
-  );
+const Metric = ({ label, value }) => (
+  <p className="text-sm text-[#e2e8f0]">
+    {`${label}: `}
+    <span
+      className="font-semibold px-2 py-1 rounded-md"
+      style={{ backgroundColor: "#1E2022", color: "#e2e8f0" }}
+    >
+      {value}
+    </span>
+  </p>
+);
 
+const OutputDetails = ({ outputDetails }) => {
   return (
     <div className="metrics-container mt-4 flex flex-col space-y-3">
-      {renderMetric("Status", outputDetails?.status?.description)}
-      {renderMetric("Memory", outputDetails?.memory)}
-      {renderMetric("Time", outputDetails?.time)}
+      <Metric label="Status" value={outputDetails?.status?.description} />
+      <Metric label="Memory" value={outputDetails?.memory} />
+      <Metric label="Time" value={outputDetails?.time} />
     </div>
   );
 };

diff --git a/src/components/OutputWindow.js b/src/components/OutputWindow.js
@@ -1,50 +1,32 @@
 import React from "react";
 
 const OutputWindow = ({ outputDetails }) => {
-  const getOutput = () => {
-    let statusId = outputDetails?.status?.id;
+  const renderOutput = () => {
+    const statusId = outputDetails?.status?.id;
+    const decodedCompileOutput = atob(outputDetails?.compile_output);
+    const decodedStdout = atob(outputDetails?.stdout);
+    const decodedStderr = atob(outputDetails?.stderr);
 
-    if (statusId === 6) {
-      // Compilation error
-      return (
-        <pre className="px-2 py-1 font-normal text-xs text-red-500">
-          {atob(outputDetails?.compile_output)}
-        </pre>
-      );
-    } else if (statusId === 3) {
-      // Successful output
-      return (
-        <pre className="px-2 py-1 font-normal text-xs" style={{ color: "#CCC8C3" }}>
-          {atob(outputDetails.stdout) !== null
-            ? `${atob(outputDetails.stdout)}`
-            : null}
-        </pre>
-      );
-    } else if (statusId === 5) {
-      // Time Limit Exceeded
-      return (
-        <pre className="px-2 py-1 font-normal text-xs text-red-500">
-          {`Time Limit Exceeded`}
-        </pre>
-      );
-    } else {
-      // Other cases (e.g., stderr)
-      return (
-        <pre className="px-2 py-1 font-normal text-xs text-red-500">
-          {atob(outputDetails?.stderr)}
-        </pre>
-      );
+    switch (statusId) {
+      case 6: // Compilation error
+        return <pre className="error-output">{decodedCompileOutput}</pre>;
+      case 3: // Successful output
+        return <pre className="success-output">{decodedStdout || null}</pre>;
+      case 5: // Time Limit Exceeded
+        return <pre className="error-output">Time Limit Exceeded</pre>;
+      default: // Other cases (e.g., stderr)
+        return <pre className="error-output">{decodedStderr}</pre>;
     }
   };
 
   return (
     <>
       <h1 className="font-bold text-xl text-white-800 mb-2">Output</h1>
       <div className="w-full h-56 bg-gray-800 rounded-md text-gray-200 font-normal text-sm overflow-y-auto">
-        {outputDetails ? <>{getOutput()}</> : null}
+        {outputDetails && renderOutput()}
       </div>
     </>
   );
 };
 
-export default OutputWindow;
+export default OutputWindow;