some new packages

package.json

@@ -5,6 +5,9 @@
  "dependencies": {
  "@emotion/react": "^11.9.3",
  "@emotion/styled": "^11.9.3",
+ "@fortawesome/fontawesome-svg-core": "^6.1.2",
+ "@fortawesome/free-solid-svg-icons": "^6.1.2",
+ "@fortawesome/react-fontawesome": "^0.2.0",
  "@giscus/react": "^2.0.3",
  "@mui/material": "^5.9.1",
  "@nhost/react": "^0.9.0",
@@ -13,6 +16,8 @@
  "@types/react-dom": "^18.0.2",
  "add": "^2.0.6",
  "axios": "^0.27.2",
+ "codemirror": "^6.0.1",
+ "create-react-play": "^0.0.10",
  "date-fns": "^2.28.0",
  "downloadjs": "^1.4.7",
  "firebase": "^9.8.2",
@@ -23,6 +28,7 @@
  "lodash": "^4.17.21",
  "node-sass": "^7.0.1",
  "react": "^18.0.0",
+ "react-codemirror2": "^7.2.1",
  "react-dom": "^18.0.0",
  "react-helmet": "^6.1.0",
  "react-icons": "^4.3.1",

src/plays/code-editor/CodeEditor.js

@@ -0,0 +1,31 @@
+import PlayHeader from 'common/playlists/PlayHeader';
+import './styles.css';
+
+// WARNING: Do not change the entry componenet name
+function CodeEditor(props) {
+
+ // Your Code Start below.
+
+ return (
+ <>
+ <div className="play-details">
+ <PlayHeader play={props} />
+ <div className="play-details-body">
+ {/* Your Code Starts Here */}
+ <div>
+ <h1>Play Details - Code Editor </h1>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Pellentesque euismod, urna eu tincidunt consectetur,
+ nisi nunc ultricies nisi, eget consectetur nunc nisi
+ euismod nunc.
+ </p>
+ </div>
+ {/* Your Code Ends Here */}
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default CodeEditor;

src/plays/code-editor/Readme.md

@@ -0,0 +1,27 @@
+# Code editor 
+
+It is a code editor for html css and javascript it is like a clone of codepen !
+
+## Play Demographic
+
+- Language: js
+- Level: Intermediate
+
+## Creator Information
+
+- User: yung-coder
+- Gihub Link: https://github.com/yung-coder
+- Blog: 
+- Video: 
+
+## Implementation Details
+
+Update your implementation idea and details here
+
+## Consideration
+
+Update all considerations(if any)
+
+## Resources
+
+Update external resources(if any)

src/plays/code-editor/styles.css

@@ -0,0 +1 @@
+/* enter stlyes here */