├── demo.png
├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── .env.sample
├── src
    ├── utils
    │   └── general.js
    ├── App.js
    ├── index.js
    ├── components
    │   ├── LanguagesDropdown.js
    │   ├── CustomInput.js
    │   ├── ThemeDropdown.js
    │   ├── CodeEditorWindow.js
    │   ├── OutputDetails.js
    │   ├── OutputWindow.js
    │   ├── Footer.js
    │   └── Landing.js
    ├── App.css
    ├── hooks
    │   └── useKeyPress.js
    ├── index.css
    ├── constants
    │   ├── statuses.js
    │   ├── customStyles.js
    │   └── languageOptions.js
    └── lib
    │   └── defineTheme.js
├── postcss.config.js
├── tailwind.config.js
├── .gitignore
├── README.md
└── package.json


/demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Naveenk069/Online_code_Compiler.github.io/main/demo.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/.env.sample:
--------------------------------------------------------------------------------
1 | REACT_APP_RAPID_API_URL = 
2 | REACT_APP_RAPID_API_HOST = 
3 | REACT_APP_RAPID_API_KEY = 


--------------------------------------------------------------------------------
/src/utils/general.js:
--------------------------------------------------------------------------------
1 | export const classnames = (...args) => {
2 |   return args.join(" ");
3 | };
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Naveenk069/Online_code_Compiler.github.io/main/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Naveenk069/Online_code_Compiler.github.io/main/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Naveenk069/Online_code_Compiler.github.io/main/public/logo512.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   content: ["./src/**/*.{js,jsx,ts,tsx}"],
3 |   theme: {
4 |     extend: {},
5 |   },
6 |   plugins: [],
7 | };
8 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import "./App.css";
2 | import Landing from "./components/Landing";
3 | 
4 | function App() {
5 |   return <Landing />;
6 | }
7 | 
8 | export default App;
9 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | import "./index.css";
 4 | import App from "./App";
 5 | 
 6 | ReactDOM.render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 |   document.getElementById("root")
11 | );
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | /dist
14 | 
15 | # misc
16 | .DS_Store
17 | .env.local
18 | .env.development.local
19 | .env.test.local
20 | .env.production.local
21 | 
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | 
26 | # Environment Variables
27 | .env
28 | .env.build
29 | .vercel
30 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/LanguagesDropdown.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Select from "react-select";
 3 | import { customStyles } from "../constants/customStyles";
 4 | import { languageOptions } from "../constants/languageOptions";
 5 | 
 6 | const LanguagesDropdown = ({ onSelectChange }) => {
 7 |   return (
 8 |     <Select
 9 |       placeholder={`Filter By Category`}
10 |       options={languageOptions}
11 |       styles={customStyles}
12 |       defaultValue={languageOptions[0]}
13 |       onChange={(selectedOption) => onSelectChange(selectedOption)}
14 |     />
15 |   );
16 | };
17 | 
18 | export default LanguagesDropdown;
19 | 


--------------------------------------------------------------------------------
/src/components/CustomInput.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { classnames } from "../utils/general";
 3 | 
 4 | const CustomInput = ({ customInput, setCustomInput }) => {
 5 |   return (
 6 |     <>
 7 |       {" "}
 8 |       <textarea
 9 |         rows="5"
10 |         value={customInput}
11 |         onChange={(e) => setCustomInput(e.target.value)}
12 |         placeholder={`Custom input`}
13 |         className={classnames(
14 |           "focus:outline-none w-full border-2 border-black z-10 rounded-md shadow-[5px_5px_0px_0px_rgba(0,0,0)] px-4 py-2 hover:shadow transition duration-200 bg-white mt-2"
15 |         )}
16 |       ></textarea>
17 |     </>
18 |   );
19 | };
20 | 
21 | export default CustomInput;
22 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   height: 40vmin;
 7 |   pointer-events: none;
 8 | }
 9 | 
10 | @media (prefers-reduced-motion: no-preference) {
11 |   .App-logo {
12 |     animation: App-logo-spin infinite 20s linear;
13 |   }
14 | }
15 | 
16 | .App-header {
17 |   background-color: #282c34;
18 |   min-height: 100vh;
19 |   display: flex;
20 |   flex-direction: column;
21 |   align-items: center;
22 |   justify-content: center;
23 |   font-size: calc(10px + 2vmin);
24 |   color: white;
25 | }
26 | 
27 | .App-link {
28 |   color: #61dafb;
29 | }
30 | 
31 | @keyframes App-logo-spin {
32 |   from {
33 |     transform: rotate(0deg);
34 |   }
35 |   to {
36 |     transform: rotate(360deg);
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/components/ThemeDropdown.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Select from "react-select";
 3 | import monacoThemes from "monaco-themes/themes/themelist";
 4 | import { customStyles } from "../constants/customStyles";
 5 | 
 6 | const ThemeDropdown = ({ handleThemeChange, theme }) => {
 7 |   return (
 8 |     <Select
 9 |       placeholder={`Select Theme`}
10 |       // options={languageOptions}
11 |       options={Object.entries(monacoThemes).map(([themeId, themeName]) => ({
12 |         label: themeName,
13 |         value: themeId,
14 |         key: themeId,
15 |       }))}
16 |       value={theme}
17 |       styles={customStyles}
18 |       onChange={handleThemeChange}
19 |     />
20 |   );
21 | };
22 | 
23 | export default ThemeDropdown;
24 | 


--------------------------------------------------------------------------------
/src/components/CodeEditorWindow.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | 
 3 | import Editor from "@monaco-editor/react";
 4 | 
 5 | const CodeEditorWindow = ({ onChange, language, code, theme }) => {
 6 |   const [value, setValue] = useState(code || "");
 7 | 
 8 |   const handleEditorChange = (value) => {
 9 |     setValue(value);
10 |     onChange("code", value);
11 |   };
12 | 
13 |   return (
14 |     <div className="overlay rounded-md overflow-hidden w-full h-full shadow-4xl">
15 |       <Editor
16 |         height="85vh"
17 |         width={`100%`}
18 |         language={language || "javascript"}
19 |         value={value}
20 |         theme={theme}
21 |         defaultValue="// some comment"
22 |         onChange={handleEditorChange}
23 |       />
24 |     </div>
25 |   );
26 | };
27 | export default CodeEditorWindow;
28 | 


--------------------------------------------------------------------------------
/src/hooks/useKeyPress.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | 
 3 | const useKeyPress = function (targetKey) {
 4 |   const [keyPressed, setKeyPressed] = useState(false);
 5 | 
 6 |   function downHandler({ key }) {
 7 |     if (key === targetKey) {
 8 |       setKeyPressed(true);
 9 |     }
10 |   }
11 | 
12 |   const upHandler = ({ key }) => {
13 |     if (key === targetKey) {
14 |       setKeyPressed(false);
15 |     }
16 |   };
17 | 
18 |   React.useEffect(() => {
19 |     document.addEventListener("keydown", downHandler);
20 |     document.addEventListener("keyup", upHandler);
21 | 
22 |     return () => {
23 |       document.removeEventListener("keydown", downHandler);
24 |       document.removeEventListener("keyup", upHandler);
25 |     };
26 |   });
27 | 
28 |   return keyPressed;
29 | };
30 | 
31 | export default useKeyPress;
32 | 


--------------------------------------------------------------------------------
/src/components/OutputDetails.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const OutputDetails = ({ outputDetails }) => {
 4 |   return (
 5 |     <div className="metrics-container mt-4 flex flex-col space-y-3">
 6 |       <p className="text-sm">
 7 |         Status:{" "}
 8 |         <span className="font-semibold px-2 py-1 rounded-md bg-gray-100">
 9 |           {outputDetails?.status?.description}
10 |         </span>
11 |       </p>
12 |       <p className="text-sm">
13 |         Memory:{" "}
14 |         <span className="font-semibold px-2 py-1 rounded-md bg-gray-100">
15 |           {outputDetails?.memory}
16 |         </span>
17 |       </p>
18 |       <p className="text-sm">
19 |         Time:{" "}
20 |         <span className="font-semibold px-2 py-1 rounded-md bg-gray-100">
21 |           {outputDetails?.time}
22 |         </span>
23 |       </p>
24 |     </div>
25 |   );
26 | };
27 | 
28 | export default OutputDetails;
29 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap');
 2 | 
 3 | 
 4 | @tailwind base;
 5 | @tailwind components;
 6 | @tailwind utilities;
 7 | 
 8 | 
 9 | * {
10 |   box-sizing: border-box;
11 |   margin: 0;
12 |   padding: 0;
13 | }
14 | body {
15 |   font-family: 'IBM Plex Sans', sans-serif;
16 |   font-weight: 300;
17 |   font-size: 14px;
18 | }
19 | 
20 | .listItem:hover {
21 |   background: #e2e8f0;
22 |   cursor: pointer;
23 | }
24 | 
25 | .github-corner svg {
26 |   position:absolute;
27 |   right:0;
28 |   top:0;
29 |   mix-blend-mode:darken;
30 |   color:#ffffff;
31 |   fill:#000000;
32 | }
33 | .github-corner:hover .octo-arm {
34 |   animation:octocat-wave .56s;
35 | }
36 | @keyframes octocat-wave {
37 |   0%, 100% {
38 |     transform:rotate(0);
39 |   }
40 |   20%, 60% { 
41 |     transform:rotate(-20deg);
42 |   
43 |   } 40%, 80% {
44 |     transform:rotate(10deg);
45 |   }
46 | }


--------------------------------------------------------------------------------
/src/constants/statuses.js:
--------------------------------------------------------------------------------
 1 | export const statuses = [
 2 |   {
 3 |     id: 1,
 4 |     description: "In Queue",
 5 |   },
 6 |   {
 7 |     id: 2,
 8 |     description: "Processing",
 9 |   },
10 |   {
11 |     id: 3,
12 |     description: "Accepted",
13 |   },
14 |   {
15 |     id: 4,
16 |     description: "Wrong Answer",
17 |   },
18 |   {
19 |     id: 5,
20 |     description: "Time Limit Exceeded",
21 |   },
22 |   {
23 |     id: 6,
24 |     description: "Compilation Error",
25 |   },
26 |   {
27 |     id: 7,
28 |     description: "Runtime Error (SIGSEGV)",
29 |   },
30 |   {
31 |     id: 8,
32 |     description: "Runtime Error (SIGXFSZ)",
33 |   },
34 |   {
35 |     id: 9,
36 |     description: "Runtime Error (SIGFPE)",
37 |   },
38 |   {
39 |     id: 10,
40 |     description: "Runtime Error (SIGABRT)",
41 |   },
42 |   {
43 |     id: 11,
44 |     description: "Runtime Error (NZEC)",
45 |   },
46 |   {
47 |     id: 12,
48 |     description: "Runtime Error (Other)",
49 |   },
50 |   {
51 |     id: 13,
52 |     description: "Internal Error",
53 |   },
54 |   {
55 |     id: 14,
56 |     description: "Exec Format Error",
57 |   },
58 | ];
59 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # CodeRush - Compile and Execute code in 40+ languages
 2 | 
 3 | ⚡️ A code editor that compiles and runs your code on the web.
 4 | Blog: <a href="https://www.freecodecamp.org/news/how-to-build-react-based-code-editor/" target="__blank">FreeCodeCamp - Build A Code IDE with React</a>
 5 | 
 6 | <img src="https://github.com/manuarora700/react-code-editor/blob/main/demo.png" />
 7 | 
 8 | ## Features: 
 9 | - Compile and execute code in 40+ programming languages.
10 | - Switch themes from a list of available themes.
11 | 
12 | ## Installations and setup
13 | 
14 | - git clone `https://github.com/manuarora700/react-code-editor.git`
15 | - `npm install`
16 | - A sample `.env.sample` file is given, Register on <a href="https://rapidapi.com/judge0-official/api/judge0-ce/pricing" target="__blank">RapidAPI</a> and get your API keys.
17 | - Create a `.env` file.
18 | - Add the API Keys in the `.env` file
19 | - `npm start` to run the project.
20 | 
21 | 
22 | 
23 | TODO:
24 | 
25 | 1. Add more languages [DONE]
26 | 2. User login, authentication and registration (Firebase Auth)
27 | 3. User Profile Page
28 | 4. Save code functionality (Firestore - use Slug based approach)
29 | 5. Share code functionality
30 | 
31 | ## Support
32 | 
33 | <a href="https://www.buymeacoffee.com/manuarora" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "dependencies": {
 4 |     "@monaco-editor/react": "^4.4.4",
 5 |     "@testing-library/jest-dom": "^5.16.1",
 6 |     "@testing-library/react": "^12.1.2",
 7 |     "@testing-library/user-event": "^13.5.0",
 8 |     "@types/jest": "^27.5.0",
 9 |     "@types/node": "^17.0.31",
10 |     "@types/react": "^18.0.9",
11 |     "@types/react-dom": "^18.0.3",
12 |     "axios": "^0.27.2",
13 |     "monaco-themes": "^0.4.1",
14 |     "react": "^17.0.2",
15 |     "react-dom": "^17.0.2",
16 |     "react-scripts": "5.0.0",
17 |     "react-select": "^5.3.1",
18 |     "react-toastify": "^9.0.1",
19 |     "typescript": "^4.6.4",
20 |     "web-vitals": "^2.1.3"
21 |   },
22 |   "scripts": {
23 |     "start": "react-scripts start",
24 |     "build": "react-scripts build",
25 |     "test": "react-scripts test",
26 |     "eject": "react-scripts eject"
27 |   },
28 |   "eslintConfig": {
29 |     "extends": [
30 |       "react-app",
31 |       "react-app/jest"
32 |     ]
33 |   },
34 |   "browserslist": {
35 |     "production": [
36 |       ">0.2%",
37 |       "not dead",
38 |       "not op_mini all"
39 |     ],
40 |     "development": [
41 |       "last 1 chrome version",
42 |       "last 1 firefox version",
43 |       "last 1 safari version"
44 |     ]
45 |   },
46 |   "devDependencies": {
47 |     "autoprefixer": "^10.4.7",
48 |     "postcss": "^8.4.13",
49 |     "tailwindcss": "^3.0.24"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/src/constants/customStyles.js:
--------------------------------------------------------------------------------
 1 | export const customStyles = {
 2 |   control: (styles) => ({
 3 |     ...styles,
 4 |     width: "100%",
 5 |     maxWidth: "14rem",
 6 |     minWidth: "12rem",
 7 |     borderRadius: "5px",
 8 |     color: "#000",
 9 |     fontSize: "0.8rem",
10 |     lineHeight: "1.75rem",
11 |     backgroundColor: "#FFFFFF",
12 |     cursor: "pointer",
13 |     border: "2px solid #000000",
14 |     boxShadow: "5px 5px 0px 0px rgba(0,0,0);",
15 |     ":hover": {
16 |       border: "2px solid #000000",
17 |       boxShadow: "none",
18 |     },
19 |   }),
20 |   option: (styles) => {
21 |     return {
22 |       ...styles,
23 |       color: "#000",
24 |       fontSize: "0.8rem",
25 |       lineHeight: "1.75rem",
26 |       width: "100%",
27 |       background: "#fff",
28 |       ":hover": {
29 |         backgroundColor: "rgb(243 244 246)",
30 |         color: "#000",
31 |         cursor: "pointer",
32 |       },
33 |     };
34 |   },
35 |   menu: (styles) => {
36 |     return {
37 |       ...styles,
38 |       backgroundColor: "#fff",
39 |       maxWidth: "14rem",
40 |       border: "2px solid #000000",
41 |       borderRadius: "5px",
42 |       boxShadow: "5px 5px 0px 0px rgba(0,0,0);",
43 |     };
44 |   },
45 | 
46 |   placeholder: (defaultStyles) => {
47 |     return {
48 |       ...defaultStyles,
49 |       color: "#000",
50 |       fontSize: "0.8rem",
51 |       lineHeight: "1.75rem",
52 |     };
53 |   },
54 | };
55 | 


--------------------------------------------------------------------------------
/src/components/OutputWindow.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const OutputWindow = ({ outputDetails }) => {
 4 |   const getOutput = () => {
 5 |     let statusId = outputDetails?.status?.id;
 6 | 
 7 |     if (statusId === 6) {
 8 |       // compilation error
 9 |       return (
10 |         <pre className="px-2 py-1 font-normal text-xs text-red-500">
11 |           {atob(outputDetails?.compile_output)}
12 |         </pre>
13 |       );
14 |     } else if (statusId === 3) {
15 |       return (
16 |         <pre className="px-2 py-1 font-normal text-xs text-green-500">
17 |           {atob(outputDetails.stdout) !== null
18 |             ? `${atob(outputDetails.stdout)}`
19 |             : null}
20 |         </pre>
21 |       );
22 |     } else if (statusId === 5) {
23 |       return (
24 |         <pre className="px-2 py-1 font-normal text-xs text-red-500">
25 |           {`Time Limit Exceeded`}
26 |         </pre>
27 |       );
28 |     } else {
29 |       return (
30 |         <pre className="px-2 py-1 font-normal text-xs text-red-500">
31 |           {atob(outputDetails?.stderr)}
32 |         </pre>
33 |       );
34 |     }
35 |   };
36 |   return (
37 |     <>
38 |       <h1 className="font-bold text-xl bg-clip-text text-transparent bg-gradient-to-r from-slate-900 to-slate-700 mb-2">
39 |         Output
40 |       </h1>
41 |       <div className="w-full h-56 bg-[#1e293b] rounded-md text-white font-normal text-sm overflow-y-auto">
42 |         {outputDetails ? <>{getOutput()}</> : null}
43 |       </div>
44 |     </>
45 |   );
46 | };
47 | 
48 | export default OutputWindow;
49 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="A react based code editor that lets you compile and execute 10+ programming languages."
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>Compile and Execute - A React based Code Editor</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/lib/defineTheme.js:
--------------------------------------------------------------------------------
 1 | import { loader } from "@monaco-editor/react";
 2 | 
 3 | const monacoThemes = {
 4 |   active4d: "Active4D",
 5 |   "all-hallows-eve": "All Hallows Eve",
 6 |   amy: "Amy",
 7 |   "birds-of-paradise": "Birds of Paradise",
 8 |   blackboard: "Blackboard",
 9 |   "brilliance-black": "Brilliance Black",
10 |   "brilliance-dull": "Brilliance Dull",
11 |   "chrome-devtools": "Chrome DevTools",
12 |   "clouds-midnight": "Clouds Midnight",
13 |   clouds: "Clouds",
14 |   cobalt: "Cobalt",
15 |   dawn: "Dawn",
16 |   dreamweaver: "Dreamweaver",
17 |   eiffel: "Eiffel",
18 |   "espresso-libre": "Espresso Libre",
19 |   github: "GitHub",
20 |   idle: "IDLE",
21 |   katzenmilch: "Katzenmilch",
22 |   "kuroir-theme": "Kuroir Theme",
23 |   lazy: "LAZY",
24 |   "magicwb--amiga-": "MagicWB (Amiga)",
25 |   "merbivore-soft": "Merbivore Soft",
26 |   merbivore: "Merbivore",
27 |   "monokai-bright": "Monokai Bright",
28 |   monokai: "Monokai",
29 |   "night-owl": "Night Owl",
30 |   "oceanic-next": "Oceanic Next",
31 |   "pastels-on-dark": "Pastels on Dark",
32 |   "slush-and-poppies": "Slush and Poppies",
33 |   "solarized-dark": "Solarized-dark",
34 |   "solarized-light": "Solarized-light",
35 |   spacecadet: "SpaceCadet",
36 |   sunburst: "Sunburst",
37 |   "textmate--mac-classic-": "Textmate (Mac Classic)",
38 |   "tomorrow-night-blue": "Tomorrow-Night-Blue",
39 |   "tomorrow-night-bright": "Tomorrow-Night-Bright",
40 |   "tomorrow-night-eighties": "Tomorrow-Night-Eighties",
41 |   "tomorrow-night": "Tomorrow-Night",
42 |   tomorrow: "Tomorrow",
43 |   twilight: "Twilight",
44 |   "upstream-sunburst": "Upstream Sunburst",
45 |   "vibrant-ink": "Vibrant Ink",
46 |   "xcode-default": "Xcode_default",
47 |   zenburnesque: "Zenburnesque",
48 |   iplastic: "iPlastic",
49 |   idlefingers: "idleFingers",
50 |   krtheme: "krTheme",
51 |   monoindustrial: "monoindustrial",
52 | };
53 | 
54 | const defineTheme = (theme) => {
55 |   return new Promise((res) => {
56 |     Promise.all([
57 |       loader.init(),
58 |       import(`monaco-themes/themes/${monacoThemes[theme]}.json`),
59 |     ]).then(([monaco, themeData]) => {
60 |       monaco.editor.defineTheme(theme, themeData);
61 |       res();
62 |     });
63 |   });
64 | };
65 | 
66 | export { defineTheme };
67 | 


--------------------------------------------------------------------------------
/src/components/Footer.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const Footer = () => {
 4 |   return (
 5 |     <div className="fixed h-8 bottom-0 px-2 py-1 flex items-center justify-center w-full text-xs text-gray-500 ">
 6 |       <span>
 7 |         Built with{" "}
 8 |         <svg
 9 |           height="2500"
10 |           viewBox="175.7 78 490.6 436.9"
11 |           width="2194"
12 |           xmlns="http://www.w3.org/2000/svg"
13 |           className="h-4 w-4 inline-block"
14 |         >
15 |           <g fill="#61dafb">
16 |             <path d="m666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9v-22.3c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6v-22.3c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zm-101.4 106.7c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24s9.5 15.8 14.4 23.4zm73.9-208.1c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6s22.9-35.6 58.3-50.6c8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zm53.8 142.9c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6z" />
17 |             <circle cx="420.9" cy="296.5" r="45.7" />
18 |           </g>
19 |         </svg>{" "}
20 |         and{" "}
21 |         <svg
22 |           id="Layer_1"
23 |           data-name="Layer 1"
24 |           xmlns="http://www.w3.org/2000/svg"
25 |           viewBox="0 0 122.88 73.29"
26 |           fill="#22d3ee"
27 |           className="h-4 w-4 inline-block"
28 |         >
29 |           <path
30 |             class="cls-1"
31 |             d="M61.44,0Q36.87,0,30.72,24.43q9.22-12.21,21.5-9.16c4.68,1.16,8,4.53,11.72,8.26,6,6.08,13,13.11,28.22,13.11q24.57,0,30.72-24.43-9.21,12.22-21.5,9.16c-4.68-1.16-8-4.53-11.72-8.26C83.64,7,76.67,0,61.44,0ZM30.72,36.64Q6.15,36.64,0,61.07q9.23-12.21,21.5-9.16c4.68,1.16,8,4.53,11.72,8.27,6,6.07,13,13.11,28.22,13.11q24.57,0,30.72-24.43Q82.95,61.07,70.66,58c-4.68-1.16-8-4.53-11.72-8.26-6-6.08-13-13.12-28.22-13.12Z"
32 |           />
33 |         </svg>{" "}
34 |         by{" "}
35 |         <a
36 |           href="https://manuarora.in"
37 |           target="__blank"
38 |           className="text-gray-700  hover:bg-red-500 hover:text-white font-medium"
39 |         >
40 |           Manu Arora.{" "}
41 |         </a>
42 |         Code at{" "}
43 |         <a
44 |           href="https://github.com/manuarora700/react-code-editor"
45 |           target="__blank"
46 |           className="text-gray-700  hover:bg-red-500 hover:text-white font-medium"
47 |         >
48 |           GitHub.{" "}
49 |         </a>
50 |         Blog on{" "}
51 |         <a
52 |           href="https://www.freecodecamp.org/news/how-to-build-react-based-code-editor/"
53 |           target="__blank"
54 |           className="text-gray-700  hover:bg-red-500 hover:text-white font-medium"
55 |         >
56 |           FreeCodeCamp
57 |         </a>
58 |         . Visit{" "}
59 |         <a
60 |           href="https://algochurn.com"
61 |           target="__blank"
62 |           className="text-gray-700  hover:bg-red-500 hover:text-white font-medium"
63 |         >
64 |           Algochurn{" "}
65 |         </a>
66 |         to ace your next frontend interview.
67 |       </span>
68 |     </div>
69 |   );
70 | };
71 | 
72 | export default Footer;
73 | 


--------------------------------------------------------------------------------
/src/constants/languageOptions.js:
--------------------------------------------------------------------------------
  1 | export const languageOptions = [
  2 |   {
  3 |     id: 63,
  4 |     name: "JavaScript (Node.js 12.14.0)",
  5 |     label: "JavaScript (Node.js 12.14.0)",
  6 |     value: "javascript",
  7 |   },
  8 |   {
  9 |     id: 45,
 10 |     name: "Assembly (NASM 2.14.02)",
 11 |     label: "Assembly (NASM 2.14.02)",
 12 |     value: "assembly",
 13 |   },
 14 |   {
 15 |     id: 46,
 16 |     name: "Bash (5.0.0)",
 17 |     label: "Bash (5.0.0)",
 18 |     value: "bash",
 19 |   },
 20 |   {
 21 |     id: 47,
 22 |     name: "Basic (FBC 1.07.1)",
 23 |     label: "Basic (FBC 1.07.1)",
 24 |     value: "basic",
 25 |   },
 26 |   {
 27 |     id: 75,
 28 |     name: "C (Clang 7.0.1)",
 29 |     label: "C (Clang 7.0.1)",
 30 |     value: "c",
 31 |   },
 32 |   {
 33 |     id: 76,
 34 |     name: "C++ (Clang 7.0.1)",
 35 |     label: "C++ (Clang 7.0.1)",
 36 |     value: "cpp",
 37 |   },
 38 |   {
 39 |     id: 48,
 40 |     name: "C (GCC 7.4.0)",
 41 |     label: "C (GCC 7.4.0)",
 42 |     value: "c",
 43 |   },
 44 |   {
 45 |     id: 52,
 46 |     name: "C++ (GCC 7.4.0)",
 47 |     label: "C++ (GCC 7.4.0)",
 48 |     value: "cpp",
 49 |   },
 50 |   {
 51 |     id: 49,
 52 |     name: "C (GCC 8.3.0)",
 53 |     label: "C (GCC 8.3.0)",
 54 |     value: "c",
 55 |   },
 56 |   {
 57 |     id: 53,
 58 |     name: "C++ (GCC 8.3.0)",
 59 |     label: "C++ (GCC 8.3.0)",
 60 |     value: "cpp",
 61 |   },
 62 |   {
 63 |     id: 50,
 64 |     name: "C (GCC 9.2.0)",
 65 |     label: "C (GCC 9.2.0)",
 66 |     value: "c",
 67 |   },
 68 |   {
 69 |     id: 54,
 70 |     name: "C++ (GCC 9.2.0)",
 71 |     label: "C++ (GCC 9.2.0)",
 72 |     value: "cpp",
 73 |   },
 74 |   {
 75 |     id: 86,
 76 |     name: "Clojure (1.10.1)",
 77 |     label: "Clojure (1.10.1)",
 78 |     value: "clojure",
 79 |   },
 80 |   {
 81 |     id: 51,
 82 |     name: "C# (Mono 6.6.0.161)",
 83 |     label: "C# (Mono 6.6.0.161)",
 84 |     value: "csharp",
 85 |   },
 86 |   {
 87 |     id: 77,
 88 |     name: "COBOL (GnuCOBOL 2.2)",
 89 |     label: "COBOL (GnuCOBOL 2.2)",
 90 |     value: "cobol",
 91 |   },
 92 |   {
 93 |     id: 55,
 94 |     name: "Common Lisp (SBCL 2.0.0)",
 95 |     label: "Common Lisp (SBCL 2.0.0)",
 96 |     value: "lisp",
 97 |   },
 98 |   {
 99 |     id: 56,
100 |     name: "D (DMD 2.089.1)",
101 |     label: "D (DMD 2.089.1)",
102 |     value: "d",
103 |   },
104 |   {
105 |     id: 57,
106 |     name: "Elixir (1.9.4)",
107 |     label: "Elixir (1.9.4)",
108 |     value: "elixir",
109 |   },
110 |   {
111 |     id: 58,
112 |     name: "Erlang (OTP 22.2)",
113 |     label: "Erlang (OTP 22.2)",
114 |     value: "erlang",
115 |   },
116 |   {
117 |     id: 44,
118 |     label: "Executable",
119 |     name: "Executable",
120 |     value: "exe",
121 |   },
122 |   {
123 |     id: 87,
124 |     name: "F# (.NET Core SDK 3.1.202)",
125 |     label: "F# (.NET Core SDK 3.1.202)",
126 |     value: "fsharp",
127 |   },
128 |   {
129 |     id: 59,
130 |     name: "Fortran (GFortran 9.2.0)",
131 |     label: "Fortran (GFortran 9.2.0)",
132 |     value: "fortran",
133 |   },
134 |   {
135 |     id: 60,
136 |     name: "Go (1.13.5)",
137 |     label: "Go (1.13.5)",
138 |     value: "go",
139 |   },
140 |   {
141 |     id: 88,
142 |     name: "Groovy (3.0.3)",
143 |     label: "Groovy (3.0.3)",
144 |     value: "groovy",
145 |   },
146 |   {
147 |     id: 61,
148 |     name: "Haskell (GHC 8.8.1)",
149 |     label: "Haskell (GHC 8.8.1)",
150 |     value: "haskell",
151 |   },
152 |   {
153 |     id: 62,
154 |     name: "Java (OpenJDK 13.0.1)",
155 |     label: "Java (OpenJDK 13.0.1)",
156 |     value: "java",
157 |   },
158 | 
159 |   {
160 |     id: 78,
161 |     name: "Kotlin (1.3.70)",
162 |     label: "Kotlin (1.3.70)",
163 |     value: "kotlin",
164 |   },
165 |   {
166 |     id: 64,
167 |     name: "Lua (5.3.5)",
168 |     label: "Lua (5.3.5)",
169 |     value: "lua",
170 |   },
171 | 
172 |   {
173 |     id: 79,
174 |     name: "Objective-C (Clang 7.0.1)",
175 |     label: "Objective-C (Clang 7.0.1)",
176 |     value: "objectivec",
177 |   },
178 |   {
179 |     id: 65,
180 |     name: "OCaml (4.09.0)",
181 |     label: "OCaml (4.09.0)",
182 |     value: "ocaml",
183 |   },
184 |   {
185 |     id: 66,
186 |     name: "Octave (5.1.0)",
187 |     label: "Octave (5.1.0)",
188 |     value: "octave",
189 |   },
190 |   {
191 |     id: 67,
192 |     name: "Pascal (FPC 3.0.4)",
193 |     label: "Pascal (FPC 3.0.4)",
194 |     value: "pascal",
195 |   },
196 |   {
197 |     id: 85,
198 |     name: "Perl (5.28.1)",
199 |     label: "Perl (5.28.1)",
200 |     value: "perl",
201 |   },
202 |   {
203 |     id: 68,
204 |     name: "PHP (7.4.1)",
205 |     label: "PHP (7.4.1)",
206 |     value: "php",
207 |   },
208 |   {
209 |     id: 43,
210 |     label: "Plain Text",
211 |     name: "Plain Text",
212 |     value: "text",
213 |   },
214 |   {
215 |     id: 69,
216 |     name: "Prolog (GNU Prolog 1.4.5)",
217 |     label: "Prolog (GNU Prolog 1.4.5)",
218 |     value: "prolog",
219 |   },
220 |   {
221 |     id: 70,
222 |     name: "Python (2.7.17)",
223 |     label: "Python (2.7.17)",
224 |     value: "python",
225 |   },
226 |   {
227 |     id: 71,
228 |     name: "Python (3.8.1)",
229 |     label: "Python (3.8.1)",
230 |     value: "python",
231 |   },
232 |   {
233 |     id: 80,
234 |     name: "R (4.0.0)",
235 |     label: "R (4.0.0)",
236 |     value: "r",
237 |   },
238 |   {
239 |     id: 72,
240 |     name: "Ruby (2.7.0)",
241 |     label: "Ruby (2.7.0)",
242 |     value: "ruby",
243 |   },
244 |   {
245 |     id: 73,
246 |     name: "Rust (1.40.0)",
247 |     label: "Rust (1.40.0)",
248 |     value: "rust",
249 |   },
250 |   {
251 |     id: 81,
252 |     name: "Scala (2.13.2)",
253 |     label: "Scala (2.13.2)",
254 |     value: "scala",
255 |   },
256 |   {
257 |     id: 82,
258 |     name: "SQL (SQLite 3.27.2)",
259 |     label: "SQL (SQLite 3.27.2)",
260 |     value: "sql",
261 |   },
262 |   {
263 |     id: 83,
264 |     name: "Swift (5.2.3)",
265 |     label: "Swift (5.2.3)",
266 |     value: "swift",
267 |   },
268 |   {
269 |     id: 74,
270 |     name: "TypeScript (3.7.4)",
271 |     label: "TypeScript (3.7.4)",
272 |     value: "typescript",
273 |   },
274 |   {
275 |     id: 84,
276 |     name: "Visual Basic.Net (vbnc 0.0.0.5943)",
277 |     label: "Visual Basic.Net (vbnc 0.0.0.5943)",
278 |     value: "vbnet",
279 |   },
280 | ];
281 | 


--------------------------------------------------------------------------------
/src/components/Landing.js:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from "react";
  2 | import CodeEditorWindow from "./CodeEditorWindow";
  3 | import axios from "axios";
  4 | import { classnames } from "../utils/general";
  5 | import { languageOptions } from "../constants/languageOptions";
  6 | 
  7 | import { ToastContainer, toast } from "react-toastify";
  8 | import "react-toastify/dist/ReactToastify.css";
  9 | 
 10 | import { defineTheme } from "../lib/defineTheme";
 11 | import useKeyPress from "../hooks/useKeyPress";
 12 | import Footer from "./Footer";
 13 | import OutputWindow from "./OutputWindow";
 14 | import CustomInput from "./CustomInput";
 15 | import OutputDetails from "./OutputDetails";
 16 | import ThemeDropdown from "./ThemeDropdown";
 17 | import LanguagesDropdown from "./LanguagesDropdown";
 18 | 
 19 | const javascriptDefault = `/**
 20 | * Problem: Binary Search: Search a sorted array for a target value.
 21 | */
 22 | 
 23 | // Time: O(log n)
 24 | const binarySearch = (arr, target) => {
 25 |  return binarySearchHelper(arr, target, 0, arr.length - 1);
 26 | };
 27 | 
 28 | const binarySearchHelper = (arr, target, start, end) => {
 29 |  if (start > end) {
 30 |    return false;
 31 |  }
 32 |  let mid = Math.floor((start + end) / 2);
 33 |  if (arr[mid] === target) {
 34 |    return mid;
 35 |  }
 36 |  if (arr[mid] < target) {
 37 |    return binarySearchHelper(arr, target, mid + 1, end);
 38 |  }
 39 |  if (arr[mid] > target) {
 40 |    return binarySearchHelper(arr, target, start, mid - 1);
 41 |  }
 42 | };
 43 | 
 44 | const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 45 | const target = 5;
 46 | console.log(binarySearch(arr, target));
 47 | `;
 48 | 
 49 | const Landing = () => {
 50 |   const [code, setCode] = useState(javascriptDefault);
 51 |   const [customInput, setCustomInput] = useState("");
 52 |   const [outputDetails, setOutputDetails] = useState(null);
 53 |   const [processing, setProcessing] = useState(null);
 54 |   const [theme, setTheme] = useState("cobalt");
 55 |   const [language, setLanguage] = useState(languageOptions[0]);
 56 | 
 57 |   const enterPress = useKeyPress("Enter");
 58 |   const ctrlPress = useKeyPress("Control");
 59 | 
 60 |   const onSelectChange = (sl) => {
 61 |     console.log("selected Option...", sl);
 62 |     setLanguage(sl);
 63 |   };
 64 | 
 65 |   useEffect(() => {
 66 |     if (enterPress && ctrlPress) {
 67 |       console.log("enterPress", enterPress);
 68 |       console.log("ctrlPress", ctrlPress);
 69 |       handleCompile();
 70 |     }
 71 |   }, [ctrlPress, enterPress]);
 72 |   const onChange = (action, data) => {
 73 |     switch (action) {
 74 |       case "code": {
 75 |         setCode(data);
 76 |         break;
 77 |       }
 78 |       default: {
 79 |         console.warn("case not handled!", action, data);
 80 |       }
 81 |     }
 82 |   };
 83 |   const handleCompile = () => {
 84 |     setProcessing(true);
 85 |     const formData = {
 86 |       language_id: language.id,
 87 |       // encode source code in base64
 88 |       source_code: btoa(code),
 89 |       stdin: btoa(customInput),
 90 |     };
 91 |     const options = {
 92 |       method: "POST",
 93 |       url: process.env.REACT_APP_RAPID_API_URL,
 94 |       params: { base64_encoded: "true", fields: "*" },
 95 |       headers: {
 96 |         "content-type": "application/json",
 97 |         "Content-Type": "application/json",
 98 |         "X-RapidAPI-Host": process.env.REACT_APP_RAPID_API_HOST,
 99 |         "X-RapidAPI-Key": process.env.REACT_APP_RAPID_API_KEY,
100 |       },
101 |       data: formData,
102 |     };
103 | 
104 |     axios
105 |       .request(options)
106 |       .then(function (response) {
107 |         console.log("res.data", response.data);
108 |         const token = response.data.token;
109 |         checkStatus(token);
110 |       })
111 |       .catch((err) => {
112 |         let error = err.response ? err.response.data : err;
113 |         // get error status
114 |         let status = err.response.status;
115 |         console.log("status", status);
116 |         if (status === 429) {
117 |           console.log("too many requests", status);
118 | 
119 |           showErrorToast(
120 |             `Quota of 100 requests exceeded for the Day! Please read the blog on freeCodeCamp to learn how to setup your own RAPID API Judge0!`,
121 |             10000
122 |           );
123 |         }
124 |         setProcessing(false);
125 |         console.log("catch block...", error);
126 |       });
127 |   };
128 | 
129 |   const checkStatus = async (token) => {
130 |     const options = {
131 |       method: "GET",
132 |       url: process.env.REACT_APP_RAPID_API_URL + "/" + token,
133 |       params: { base64_encoded: "true", fields: "*" },
134 |       headers: {
135 |         "X-RapidAPI-Host": process.env.REACT_APP_RAPID_API_HOST,
136 |         "X-RapidAPI-Key": process.env.REACT_APP_RAPID_API_KEY,
137 |       },
138 |     };
139 |     try {
140 |       let response = await axios.request(options);
141 |       let statusId = response.data.status?.id;
142 | 
143 |       // Processed - we have a result
144 |       if (statusId === 1 || statusId === 2) {
145 |         // still processing
146 |         setTimeout(() => {
147 |           checkStatus(token);
148 |         }, 2000);
149 |         return;
150 |       } else {
151 |         setProcessing(false);
152 |         setOutputDetails(response.data);
153 |         showSuccessToast(`Compiled Successfully!`);
154 |         console.log("response.data", response.data);
155 |         return;
156 |       }
157 |     } catch (err) {
158 |       console.log("err", err);
159 |       setProcessing(false);
160 |       showErrorToast();
161 |     }
162 |   };
163 | 
164 |   function handleThemeChange(th) {
165 |     const theme = th;
166 |     console.log("theme...", theme);
167 | 
168 |     if (["light", "vs-dark"].includes(theme.value)) {
169 |       setTheme(theme);
170 |     } else {
171 |       defineTheme(theme.value).then((_) => setTheme(theme));
172 |     }
173 |   }
174 |   useEffect(() => {
175 |     defineTheme("oceanic-next").then((_) =>
176 |       setTheme({ value: "oceanic-next", label: "Oceanic Next" })
177 |     );
178 |   }, []);
179 | 
180 |   const showSuccessToast = (msg) => {
181 |     toast.success(msg || `Compiled Successfully!`, {
182 |       position: "top-right",
183 |       autoClose: 1000,
184 |       hideProgressBar: false,
185 |       closeOnClick: true,
186 |       pauseOnHover: true,
187 |       draggable: true,
188 |       progress: undefined,
189 |     });
190 |   };
191 |   const showErrorToast = (msg, timer) => {
192 |     toast.error(msg || `Something went wrong! Please try again.`, {
193 |       position: "top-right",
194 |       autoClose: timer ? timer : 1000,
195 |       hideProgressBar: false,
196 |       closeOnClick: true,
197 |       pauseOnHover: true,
198 |       draggable: true,
199 |       progress: undefined,
200 |     });
201 |   };
202 | 
203 |   return (
204 |     <>
205 |       <ToastContainer
206 |         position="top-right"
207 |         autoClose={2000}
208 |         hideProgressBar={false}
209 |         newestOnTop={false}
210 |         closeOnClick
211 |         rtl={false}
212 |         pauseOnFocusLoss
213 |         draggable
214 |         pauseOnHover
215 |       />
216 | 
217 |       <a
218 |         href="https://github.com/manuarora700/react-code-editor"
219 |         title="Fork me on GitHub"
220 |         class="github-corner"
221 |         target="_blank"
222 |         rel="noreferrer"
223 |       >
224 |         <svg
225 |           width="50"
226 |           height="50"
227 |           viewBox="0 0 250 250"
228 |           className="relative z-20 h-20 w-20"
229 |         >
230 |           <title>Fork me on GitHub</title>
231 |           <path d="M0 0h250v250"></path>
232 |           <path
233 |             d="M127.4 110c-14.6-9.2-9.4-19.5-9.4-19.5 3-7 1.5-11 1.5-11-1-6.2 3-2 3-2 4 4.7 2 11 2 11-2.2 10.4 5 14.8 9 16.2"
234 |             fill="currentColor"
235 |             style={{ transformOrigin: "130px 110px" }}
236 |             class="octo-arm"
237 |           ></path>
238 |           <path
239 |             d="M113.2 114.3s3.6 1.6 4.7.6l15-13.7c3-2.4 6-3 8.2-2.7-8-11.2-14-25 3-41 4.7-4.4 10.6-6.4 16.2-6.4.6-1.6 3.6-7.3 11.8-10.7 0 0 4.5 2.7 6.8 16.5 4.3 2.7 8.3 6 12 9.8 3.3 3.5 6.7 8 8.6 12.3 14 3 16.8 8 16.8 8-3.4 8-9.4 11-11.4 11 0 5.8-2.3 11-7.5 15.5-16.4 16-30 9-40 .2 0 3-1 7-5.2 11l-13.3 11c-1 1 .5 5.3.8 5z"
240 |             fill="currentColor"
241 |             class="octo-body"
242 |           ></path>
243 |         </svg>
244 |       </a>
245 | 
246 |       <div className="h-4 w-full bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500"></div>
247 |       <div className="flex flex-row">
248 |         <div className="px-4 py-2">
249 |           <LanguagesDropdown onSelectChange={onSelectChange} />
250 |         </div>
251 |         <div className="px-4 py-2">
252 |           <ThemeDropdown handleThemeChange={handleThemeChange} theme={theme} />
253 |         </div>
254 |       </div>
255 |       <div className="flex flex-row space-x-4 items-start px-4 py-4">
256 |         <div className="flex flex-col w-full h-full justify-start items-end">
257 |           <CodeEditorWindow
258 |             code={code}
259 |             onChange={onChange}
260 |             language={language?.value}
261 |             theme={theme.value}
262 |           />
263 |         </div>
264 | 
265 |         <div className="right-container flex flex-shrink-0 w-[30%] flex-col">
266 |           <OutputWindow outputDetails={outputDetails} />
267 |           <div className="flex flex-col items-end">
268 |             <CustomInput
269 |               customInput={customInput}
270 |               setCustomInput={setCustomInput}
271 |             />
272 |             <button
273 |               onClick={handleCompile}
274 |               disabled={!code}
275 |               className={classnames(
276 |                 "mt-4 border-2 border-black z-10 rounded-md shadow-[5px_5px_0px_0px_rgba(0,0,0)] px-4 py-2 hover:shadow transition duration-200 bg-white flex-shrink-0",
277 |                 !code ? "opacity-50" : ""
278 |               )}
279 |             >
280 |               {processing ? "Processing..." : "Compile and Execute"}
281 |             </button>
282 |           </div>
283 |           {outputDetails && <OutputDetails outputDetails={outputDetails} />}
284 |         </div>
285 |       </div>
286 |       <Footer />
287 |     </>
288 |   );
289 | };
290 | export default Landing;
291 | 


--------------------------------------------------------------------------------