Fix/limit perday

.eslintrc.json

@@ -13,7 +13,8 @@
     "react/prop-types": "off",
     "react/react-in-jsx-scope": "off",
     "indent": ["error", 2],
-    "linebreak-style": ["error", "unix"],
+    // "linebreak-style": ["error", "unix"],
+    "linebreak-style": ["error", "windows"],
     "quotes": ["error", "double"],
     "no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
     "import/order": ["error", { "groups": [["builtin", "external", "internal"]] }],

package.json

@@ -13,9 +13,10 @@
     "notistack": "^3.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-icons": "^5.2.1",
+    "react-icons": "^5.3.0",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
+    "react-toastify": "^10.0.5",
     "styled-components": "^6.1.11"
   },
   "scripts": {

src/App.js

@@ -1,22 +1,40 @@
+// App.js
+import { useState } from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { ThemeProvider } from "@mui/material";
 import EditorComponent from "./pages/EditorComponent";
-import theme from "./theme";
+import { lightTheme, darkTheme } from "./theme";
 import SnackbarProvider from "./components/js/SnackbarProvider";
 
 function App() {
+  const [darkMode, setDarkMode] = useState(false);
+
+  const toggleTheme = () => {
+    setDarkMode((prevMode) => !prevMode);
+  };
+
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
       <SnackbarProvider>
         <BrowserRouter>
           <Routes>
-            <Route path="/" element={<EditorComponent />} />
-            <Route path="/editor" element={<EditorComponent />} />
+            <Route
+              path="/"
+              element={
+                <EditorComponent darkMode={darkMode} toggleTheme={toggleTheme} />
+              }
+            />
+            <Route
+              path="/editor"
+              element={
+                <EditorComponent darkMode={darkMode} toggleTheme={toggleTheme} />
+              }
+            />
           </Routes>
         </BrowserRouter>
       </SnackbarProvider>
     </ThemeProvider>
   );
 }
 
-export default App
+export default App;

src/components/css/EditorComponent.css

@@ -14,8 +14,8 @@
   margin-left: 0.5rem;
   margin-right: 0.5rem;
   padding: 0.5rem;
-  border: 3px solid rgba(0, 0, 0, 0.096);
   border-radius: 1rem;
+  transition: background-color 0.3s ease;
 }
 
 .sidebar {
@@ -32,15 +32,15 @@
 }
 
 .output {
-  background-color: #d8dbcc;
   height: 22.3vh;
   overflow-y: auto;
   padding: 1rem;
   margin: 0.5rem;
-  border: 3px solid rgba(0, 0, 0, 0.096);
   border-radius: 1rem;
+  transition: background-color 0.3s ease;
 }
 
+/* Responsive layout */
 @media (min-width: 768px) {
   .layout {
     flex-direction: row;

src/components/css/index.css

@@ -4,3 +4,15 @@ body {
   margin: 0;
   font-family: 'Poppins';
 }
+
+/* Light Mode */
+.light-mode {
+  background-color: #f9f9f9;
+  color: #333;
+}
+
+/* Dark Mode */
+.dark-mode {
+  background-color: #333;
+  color: #f9f9f9;
+}

src/components/js/LanguageSelect.js

@@ -3,7 +3,7 @@ import Autocomplete from "@mui/material/Autocomplete";
 import TextField from "@mui/material/TextField";
 import { LANGUAGES } from "../../constants/constants";
 
-function LanguageSelect({ handleLanguageChange, defaultLanguage }) {
+function LanguageSelect({ handleLanguageChange, defaultLanguage, darkMode }) {
   return (
     <Autocomplete
       size="small"
@@ -18,7 +18,25 @@ function LanguageSelect({ handleLanguageChange, defaultLanguage }) {
           {...params}
           label="Select Language"
           variant="outlined"
-          sx={{ width: 150 }}
+          sx={{
+            width: 150,
+            backgroundColor: darkMode ? "#333" : "#fff", // Background changes with dark mode
+            color: darkMode ? "#fff" : "#000", // Text color changes
+            "& .MuiOutlinedInput-root": {
+              "& fieldset": {
+                borderColor: darkMode ? "#555" : "#ccc", // Border color for dark mode
+              },
+              "&:hover fieldset": {
+                borderColor: darkMode ? "#aaa" : "#1976d2", // Hover state
+              },
+              "&.Mui-focused fieldset": {
+                borderColor: darkMode ? "#bbb" : "#1976d2", // Focus state
+              },
+            },
+            "& .MuiInputLabel-root": {
+              color: darkMode ? "#bbb" : "#000", // Label color in dark mode
+            },
+          }}
         />
       )}
     />

src/pages/EditorComponent.js

@@ -1,10 +1,13 @@
 import React, { useState, useRef, useEffect } from "react";
-import { FaPlay } from "react-icons/fa";
+import { FaPlay, FaSun, FaMoon } from "react-icons/fa"; // Import icons
 import Editor from "@monaco-editor/react";
 import "../components/css/EditorComponent.css";
 import "@fortawesome/fontawesome-free/css/all.css";
 import { useSnackbar } from "notistack";
-import { Button, CircularProgress, styled } from "@mui/material";
+import { Button, CircularProgress, styled, IconButton } from "@mui/material";
+import { toast, ToastContainer } from "react-toastify"; // Import react-toastify
+import "react-toastify/dist/ReactToastify.css"; // Import CSS for toasts
+
 import Stars from "../components/js/Stars";
 import {
   LANGUAGES,
@@ -21,7 +24,7 @@ const StyledButton = styled(Button)({
   gap: "0.5rem",
 });
 
-function EditorComponent() {
+function EditorComponent({ darkMode, toggleTheme }) {
   const [code, setCode] = useState(null);
   const [output, setOutput] = useState([]);
   const [currentLanguage, setCurrentLanguage] = useState(
@@ -108,7 +111,7 @@ function EditorComponent() {
               setOutput(data.message);
               return;
             }
-            const formatedData = data.stdout.split("\n")
+            const formatedData = data.stdout.split("\n");
             setOutput(formatedData);
           })
           .catch((error) => {
@@ -129,53 +132,82 @@ function EditorComponent() {
     setCode(null);
   }
 
+  // Add toast inside toggleTheme
+  const handleToggleTheme = () => {
+    toggleTheme();
+    toast.darkMode
+      ? toast.info("Switched to light mode")
+      : toast.info("Switched to dark mode");
+  };
+
+  useEffect(() => {
+    toast.info(
+      "Note: The code editor is currently using the free tier version of Judge0, which has a limit of 50 requests per day. Please be mindful of your usage."
+    );
+  }, []);
+
   return (
-    <div className="editor-container">
-      <div style={{ height: "auto", margin: "0.5rem", paddingLeft:"0.5rem", paddingRight: "0.5rem", border: "3px solid rgba(0, 0, 0, 0.096)", borderRadius: "1rem" }}>
-        <div style={styles.flex}>
-          {getLanguageLogoById(languageDetails.LANGUAGE_ID)}
-          <div style={{ fontWeight: "bold" }}>
-            {languageDetails.LANGUAGE_NAME}
+    <div>
+      <ToastContainer /> {/* Add ToastContainer for notifications */}
+      <div className="editor-container">
+        <div
+          style={{
+            height: "auto",
+            margin: "0.5rem",
+            paddingLeft: "0.5rem",
+            paddingRight: "0.5rem",
+            border: "3px solid rgba(0, 0, 0, 0.096)",
+            borderRadius: "1rem",
+          }}
+        >
+          <div style={styles.flex}>
+            {getLanguageLogoById(languageDetails.LANGUAGE_ID)}
+            <div style={{ fontWeight: "bold" }}>
+              {languageDetails.LANGUAGE_NAME}
+            </div>
+            <Stars />
+            <IconButton onClick={handleToggleTheme} color="inherit">
+              {darkMode ? <FaSun size={20} /> : <FaMoon size={20} />}
+            </IconButton>
           </div>
-          <Stars />
         </div>
-      </div>
-      <div className="layout">
-        <Editor
-          className="editor"
-          theme="vs-dark"
-          onMount={handleEditorDidMount}
-          value={code}
-          onChange={setCode}
-          language={languageDetails.DEFAULT_LANGUAGE}
-        />
-        <div className="sidebar">
-          <div style={styles.languageDropdown}>
-            <LanguageSelect
-              handleLanguageChange={handleLanguageChange}
-              defaultLanguage={languageDetails}
-            />
+        <div className="layout">
+          <Editor
+            className="editor"
+            theme={darkMode ? "vs-dark" : "light"}
+            onMount={handleEditorDidMount}
+            value={code}
+            onChange={setCode}
+            language={languageDetails.DEFAULT_LANGUAGE}
+          />
+          <div className="sidebar">
+            <div style={styles.languageDropdown}>
+              <LanguageSelect
+                handleLanguageChange={handleLanguageChange}
+                defaultLanguage={languageDetails}
+                darkMode={darkMode}
+              />
+            </div>
+            <StyledButton
+              onClick={submitCode}
+              style={styles.button}
+              variant="contained"
+              color="primary"
+              disabled={loading}
+            >
+              <span>
+                {loading ? <CircularProgress size={16} /> : <FaPlay size="16" />}
+              </span>
+              Run {languageDetails.LANGUAGE_NAME}
+            </StyledButton>
           </div>
-          <StyledButton
-            onClick={submitCode}
-            style={styles.button}
-            variant="contained"
-            color="primary"
-            disabled={loading}
-          >
-            <span>
-              {loading ? <CircularProgress size={16} /> : <FaPlay size="16" />}
-            </span>
-            Run {languageDetails.LANGUAGE_NAME}
-          </StyledButton>
         </div>
-      </div>
-      <div className="output">
-        {
-          output && output.map((result, i)=>{
-            return <div key={i}>{result}</div>
-          })
-        }
+        <div className="output">
+          {output &&
+            output.map((result, i) => {
+              return <div key={i}>{result}</div>;
+            })}
+        </div>
       </div>
     </div>
   );