Added shareable code links via URL

package.json

@@ -19,7 +19,8 @@
     "npm": "^11.4.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-icons": "^5.5.0"
+    "react-icons": "^5.5.0",
+    "react-router-dom": "^7.12.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

src/App.jsx

@@ -1,10 +1,19 @@
-import CompilerLandingPage from "./pages/CompilerLandingPage";
+// src/App.jsx
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+
+import CompilerLandingPage from "./pages/CodeEditor";
+import CodeEditor from "./pages/CodeEditor";
 
 function App() {
   return (
-    <div className="min-h-screen bg-[#0f0a19] text-gray-500 overflow-hidden">
-      <CompilerLandingPage />
-    </div>
+    <BrowserRouter>
+      <div className="min-h-screen bg-[#0f0a19] text-gray-500 overflow-hidden">
+        <Routes>
+          <Route path="/" element={<CompilerLandingPage />} />
+          <Route path="/editor" element={<CodeEditor />} />
+        </Routes>
+      </div>
+    </BrowserRouter>
   );
 }
 

src/components/CodeEditorWindow.jsx

@@ -1,6 +1,5 @@
 // src/components/CodeEditorWindow.jsx
 import Editor from "@monaco-editor/react";
-import { CODE_SNIPPETS } from "../utils/constant"; // Correct path to constant.js
 
 const CodeEditorWindow = ({
   onChange,
@@ -10,37 +9,41 @@ const CodeEditorWindow = ({
   className = "",
   style = {},
   activeFileId,
-  // openFiles,
 }) => {
-  return activeFileId ? (
+  if (!activeFileId) {
+    return (
+      <p className="text-center text-gray-400 mt-4">
+        Select or create a file to start editing
+      </p>
+    );
+  }
+
+  return (
     <div className={`h-full ${className}`} style={style}>
       <Editor
-        height="100%" 
+        height="100%"
         language={language || "javascript"}
+        value={code}                 // ✅ single source of truth
         onMount={onMount}
-        value={code}
+        onChange={(val) => onChange(val ?? "")}
         theme="vs-dark"
         options={{
           minimap: { enabled: true },
-          fontSize: 14, 
+          fontSize: 14,
           scrollBeyondLastLine: false,
-          wordWrap: "on", 
-          showUnused: true, 
+          wordWrap: "on",
+          showUnused: true,
           cursorBlinking: "smooth",
           cursorSmoothCaretAnimation: "on",
-          renderLineHighlight: "all", 
-          lineNumbersMinChars: 3, 
+          renderLineHighlight: "all",
+          lineNumbersMinChars: 3,
           fontFamily: "Fira Code, Consolas, 'Courier New', monospace",
-          fontLigatures: true, 
+          fontLigatures: true,
           "bracketPairColorization.enabled": true,
           "guides.bracketPairs": "active",
         }}
-        defaultValue={CODE_SNIPPETS[language]}
-        onChange={(val) => onChange(val)}
       />
     </div>
-  ) : (
-    <p>Select or create a file to start editing</p>
   );
 };
 

src/components/CompilerLandingPage.jsx

@@ -0,0 +1,56 @@
+// src/pages/CompilerLandingPage.jsx
+import { useNavigate } from "react-router-dom";
+import { motion } from "framer-motion";
+import { FiPlay } from "react-icons/fi";
+import { useTheme } from "../context/ThemeContext";
+
+const CompilerLandingPage = () => {
+  const navigate = useNavigate();
+  const { theme } = useTheme();
+
+  return (
+    <div
+      className={`min-h-screen flex flex-col items-center justify-center text-center px-6
+        ${
+          theme === "dark"
+            ? "bg-dark-background-primary text-dark-text-primary"
+            : "bg-light-background-primary text-light-text-primary"
+        }`}
+    >
+      {/* Title */}
+      <motion.h1
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6 }}
+        className="text-3xl md:text-5xl font-extrabold mb-4"
+      >
+        Online Code Compiler
+      </motion.h1>
+
+      {/* Subtitle */}
+      <motion.p
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.2 }}
+        className="text-gray-400 max-w-xl mb-8"
+      >
+        Write, run, and share code instantly in your browser.  
+        No setup. No login. Just code.
+      </motion.p>
+
+      {/* CTA Button */}
+      <motion.button
+        whileHover={{ scale: 1.05 }}
+        whileTap={{ scale: 0.95 }}
+        onClick={() => navigate("/editor")}
+        className="flex items-center gap-2 px-6 py-3 rounded-lg font-semibold text-white
+                   bg-blue-600 hover:bg-blue-700 shadow-lg"
+      >
+        <FiPlay size={18} />
+        Start Coding
+      </motion.button>
+    </div>
+  );
+};
+
+export default CompilerLandingPage;