From 94748dcebdbcf1155997b3dca8e072a0c15b6639 Mon Sep 17 00:00:00 2001 From: kk7188048 Date: Mon, 16 Sep 2024 15:08:53 +0530 Subject: [PATCH 1/2] Added toggle button --- .eslintrc.json | 3 +- package-lock.json | 8 ++--- package.json | 2 +- src/App.js | 28 ++++++++++++++--- src/components/css/EditorComponent.css | 6 ++-- src/components/css/index.css | 12 ++++++++ src/components/js/LanguageSelect.js | 22 ++++++++++++-- src/pages/EditorComponent.js | 35 ++++++++++++++------- src/theme.js | 42 +++++++++++++++++++++++--- 9 files changed, 126 insertions(+), 32 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index d300749..6f1b092 100644 --- a/.eslintrc.json +++ b/.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"]] }], diff --git a/package-lock.json b/package-lock.json index 1fce03b..ddf03b6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,7 @@ "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", "styled-components": "^6.1.11" @@ -16433,9 +16433,9 @@ "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, "node_modules/react-icons": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz", - "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", + "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", "peerDependencies": { "react": "*" } diff --git a/package.json b/package.json index 5a03ce7..aa4e163 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "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", "styled-components": "^6.1.11" diff --git a/src/App.js b/src/App.js index e3145b6..56d8f82 100644 --- a/src/App.js +++ b/src/App.js @@ -1,17 +1,35 @@ +// 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 ( - + - } /> - } /> + + } + /> + + } + /> @@ -19,4 +37,4 @@ function App() { ); } -export default App +export default App; diff --git a/src/components/css/EditorComponent.css b/src/components/css/EditorComponent.css index 7d7f22d..6e44803 100644 --- a/src/components/css/EditorComponent.css +++ b/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; diff --git a/src/components/css/index.css b/src/components/css/index.css index 9a9ab99..4449692 100644 --- a/src/components/css/index.css +++ b/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; +} \ No newline at end of file diff --git a/src/components/js/LanguageSelect.js b/src/components/js/LanguageSelect.js index 1180bbb..eff381f 100644 --- a/src/components/js/LanguageSelect.js +++ b/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 ( )} /> diff --git a/src/pages/EditorComponent.js b/src/pages/EditorComponent.js index 1695413..f3884be 100644 --- a/src/pages/EditorComponent.js +++ b/src/pages/EditorComponent.js @@ -1,10 +1,11 @@ +// EditorComponent.js 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 Stars from "../components/js/Stars"; import { LANGUAGES, @@ -21,7 +22,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 +109,7 @@ function EditorComponent() { setOutput(data.message); return; } - const formatedData = data.stdout.split("\n") + const formatedData = data.stdout.split("\n"); setOutput(formatedData); }) .catch((error) => { @@ -131,19 +132,31 @@ function EditorComponent() { return (
-
+
{getLanguageLogoById(languageDetails.LANGUAGE_ID)}
{languageDetails.LANGUAGE_NAME}
+ + {darkMode ? : } +
- { - output && output.map((result, i)=>{ - return
{result}
- }) - } + {output && + output.map((result, i) => { + return
{result}
; + })}
); diff --git a/src/theme.js b/src/theme.js index b85a800..4d9dfde 100644 --- a/src/theme.js +++ b/src/theme.js @@ -1,22 +1,54 @@ +// theme.js import { createTheme } from "@mui/material/styles"; -const theme = createTheme({ +export const lightTheme = createTheme({ palette: { + mode: "light", primary: { main: "#1976d2", }, secondary: { main: "#dc004e", }, + background: { + default: "#fff", + paper: "#f5f5f5", + }, + text: { + primary: "#000", + secondary: "#555", + }, }, typography: { h1: { fontSize: "2rem", }, - fontFamily: [ - "Poppins", - ], + fontFamily: ["Poppins"], }, }); -export default theme; +export const darkTheme = createTheme({ + palette: { + mode: "dark", + primary: { + main: "#90caf9", + }, + secondary: { + main: "#f48fb1", + }, + background: { + default: "#121212", + paper: "#1e1e1e", + }, + text: { + primary: "#fff", + secondary: "#aaa", + }, + }, + typography: { + h1: { + fontSize: "2rem", + }, + fontFamily: ["Poppins"], + }, +}); From dbcc2a1c092af0f3a910d9d658c20b240c6cb537 Mon Sep 17 00:00:00 2001 From: kk7188048 Date: Wed, 18 Sep 2024 17:51:07 +0530 Subject: [PATCH 2/2] Added toast --- package-lock.json | 13 ++++ package.json | 1 + src/pages/EditorComponent.js | 129 ++++++++++++++++++++--------------- 3 files changed, 88 insertions(+), 55 deletions(-) diff --git a/package-lock.json b/package-lock.json index ddf03b6..cbef933 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "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" }, "devDependencies": { @@ -17708,6 +17709,18 @@ "node": ">=10" } }, + "node_modules/react-toastify": { + "version": "10.0.5", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz", + "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==", + "dependencies": { + "clsx": "^2.1.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", diff --git a/package.json b/package.json index aa4e163..6d4a357 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "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": { diff --git a/src/pages/EditorComponent.js b/src/pages/EditorComponent.js index f3884be..8c2d487 100644 --- a/src/pages/EditorComponent.js +++ b/src/pages/EditorComponent.js @@ -1,4 +1,3 @@ -// EditorComponent.js import React, { useState, useRef, useEffect } from "react"; import { FaPlay, FaSun, FaMoon } from "react-icons/fa"; // Import icons import Editor from "@monaco-editor/react"; @@ -6,6 +5,9 @@ import "../components/css/EditorComponent.css"; import "@fortawesome/fontawesome-free/css/all.css"; import { useSnackbar } from "notistack"; 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, @@ -130,65 +132,82 @@ function EditorComponent({ darkMode, toggleTheme }) { 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 ( -
-
-
- {getLanguageLogoById(languageDetails.LANGUAGE_ID)} -
- {languageDetails.LANGUAGE_NAME} +
+ {/* Add ToastContainer for notifications */} +
+
+
+ {getLanguageLogoById(languageDetails.LANGUAGE_ID)} +
+ {languageDetails.LANGUAGE_NAME} +
+ + + {darkMode ? : } +
- - - {darkMode ? : } -
-
-
- -
-
- +
+ +
+
+ +
+ + + {loading ? : } + + Run {languageDetails.LANGUAGE_NAME} +
- - - {loading ? : } - - Run {languageDetails.LANGUAGE_NAME} -
-
-
- {output && - output.map((result, i) => { - return
{result}
; - })} +
+ {output && + output.map((result, i) => { + return
{result}
; + })} +
);