diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..2500f92
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Code Editor
+
+
+
+
+
+
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..f2c367c
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import Editor from './components/Editor';
+
+function App() {
+ return (
+
+
+ Welcome to the Code Editor
+
+
+
+
+
+ );
+}
+
+export default App;
diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
new file mode 100644
index 0000000..7fc8600
--- /dev/null
+++ b/src/components/Editor.tsx
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { Controlled as CodeMirror } from '@uiw/react-codemirror';
+import { javascript } from '@codemirror/lang-javascript';
+import { oneDark } from '@codemirror/theme-one-dark';
+
+const Editor = () => {
+ const [code, setCode] = useState('// Write your code here\n');
+
+ const handleCodeChange = (editor, data, value) => {
+ setCode(value);
+ };
+
+ return (
+
+
+
+ );
+};
+
+export default Editor;
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..235fc41
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,70 @@
+.editor-container {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+}
+
+.CodeMirror {
+ flex: 1;
+ font-family: 'JetBrains Mono', monospace;
+ font-size: 14px;
+}
+
+.CodeMirror-lines {
+ padding: 10px;
+}
+
+.CodeMirror-gutters {
+ background-color: #282c34;
+ border-right: 1px solid #555;
+}
+
+.CodeMirror-cursor {
+ border-left: 1px solid #fff;
+}
+
+.CodeMirror-linenumber {
+ color: #888;
+}
+
+.CodeMirror-selected {
+ background-color: rgba(255, 255, 255, 0.1);
+}
+
+.CodeMirror-line {
+ color: #abb2bf;
+}
+
+.CodeMirror-matchingbracket {
+ text-decoration: underline;
+ color: #fff !important;
+}
+
+.CodeMirror-nonmatchingbracket {
+ background: none;
+ color: #f00;
+}
+
+.CodeMirror-foldmarker {
+ color: #555;
+ font-family: arial;
+ line-height: .3;
+ cursor: pointer;
+}
+
+.CodeMirror-foldgutter {
+ width: .7em;
+}
+
+.CodeMirror-foldgutter-open,
+.CodeMirror-foldgutter-folded {
+ color: #555;
+}
+
+.CodeMirror-foldgutter-open:after {
+ content: "▾";
+}
+
+.CodeMirror-foldgutter-folded:after {
+ content: "▸";
+}