Online editor (#596)

* add editor

* add defined types

* add typescript

* ran prettier

* removed booleans

package.json

@@ -21,6 +21,7 @@
  "@googlemaps/typescript-guards": "^2.0.1",
  "@radix-ui/themes": "^1.1.0",
  "@types/express": "^4.17.17",
+ "ace-builds": "^1.33.1",
  "ai": "^2.2.8",
  "axios": "^1.4.0",
  "clsx": "^1.2.1",
@@ -39,6 +40,7 @@
  "next-seo": "^5.5.0",
  "next-sitemap": "^3.1.11",
  "react": "18.2.0",
+ "react-ace": "^11.0.1",
  "react-dom": "18.2.0",
  "react-hook-form": "^7.45.0",
  "react-simple-typewriter": "^3.0.1",

src/components/EmojiRain/index.tsx

@@ -1,28 +1,28 @@
-import React from 'react';
+import React from "react";
 
 const EmojiRain = () => {
  // Generate unique IDs for each emoji
  const emojis = Array.from({ length: 100 }).map((_, index) => ({
  id: `emoji-${index}-${new Date().getTime()}-${Math.random()}`, // This generates a unique ID
- emoji: '🎖️',
+ emoji: "🎖️",
  }));
 
  return (
-  <div className="fixed top-0 left-0 w-full h-full pointer-events-none z-50 overflow-hidden">
-  {emojis.map((emojiObj) => (
-  <div
-  key={emojiObj.id} // Using the unique ID as key
-  style={{
-  position: "absolute",
-  left: `${Math.random() * 100}%`,
-  top: `${Math.random() * 100}%`,
-  animation: "fall 5s linear forwards",
-  }}
-  >
-  {emojiObj.emoji}
-  </div>
-  ))}
-  </div>
+ <div className="fixed top-0 left-0 w-full h-full pointer-events-none z-50 overflow-hidden">
+ {emojis.map((emojiObj) => (
+ <div
+ key={emojiObj.id} // Using the unique ID as key
+ style={{
+ position: "absolute",
+ left: `${Math.random() * 100}%`,
+ top: `${Math.random() * 100}%`,
+ animation: "fall 5s linear forwards",
+ }}
+ >
+ {emojiObj.emoji}
+ </div>
+ ))}
+ </div>
  );
 };
 

src/components/code-editor/index.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import AceEditor from "react-ace";
+
+// Import the languages and themes you want to use
+import "ace-builds/src-noconflict/mode-javascript";
+import "ace-builds/src-noconflict/theme-monokai";
+
+// Define a type for the props
+type CodeEditorProps = {
+ value: string;
+ onChange: (newValue: string) => void;
+};
+
+const CodeEditor: React.FC<CodeEditorProps> = ({ value, onChange }) => {
+ return (
+ <AceEditor
+ mode="javascript"
+ theme="monokai"
+ value={value}
+ onChange={onChange}
+ name="UNIQUE_ID_OF_DIV"
+ editorProps={{ $blockScrolling: true }}
+ fontSize={14}
+ showPrintMargin
+ showGutter
+ highlightActiveLine
+ setOptions={{
+ enableBasicAutocompletion: true,
+ enableLiveAutocompletion: true,
+ enableSnippets: true,
+ showLineNumbers: true,
+ tabSize: 2,
+ }}
+ />
+ );
+};
+
+export default CodeEditor;

src/components/forms/apply-form.tsx

@@ -356,9 +356,7 @@ const ApplyForm = () => {
  >
  Apply
  </Button>
- {message && (
- <Feedback state="success">{message}</Feedback>
- )}
+ {message && <Feedback state="success">{message}</Feedback>}
  {showEmojiRain && <EmojiRain />}
  </form>
  </div>

src/components/forms/mentor-form.tsx

@@ -214,9 +214,7 @@ const MentorForm = () => {
  >
  Register
  </Button>
- {message && (
- <Feedback state="success">{message}</Feedback>
- )}
+ {message && <Feedback state="success">{message}</Feedback>}
  {showEmojiRain && <EmojiRain />}
  </form>
  </div>

src/containers/course-details/index.tsx

@@ -19,45 +19,44 @@ type TProps = {
 const CourseDetails = ({
  data: { course, curriculum, instructor },
 }: TProps) => {
-
  return (
  <>
- <section className="course-details">
- <div className="tw-container tw-grid lg:tw-grid-cols-3 tw-gap-12">
- <div className="lg:tw-col-[1/3]">
- <TabContainer variant="underline">
- {/*
+  <section className="course-details">
+  <div className="tw-container tw-grid lg:tw-grid-cols-3 tw-gap-12">
+  <div className="lg:tw-col-[1/3]">
+  <TabContainer variant="underline">
+  {/*
  <TabList>
  <TabNav>Overview</TabNav>
  <TabNav>Curriculum</TabNav>
  <TabNav>Instructor</TabNav>
  </TabList>
  */}
- <TabContent className="tw-mt-10 lg:tw-mt-[50px]">
- <TabPane>
- {course?.description && (
- <OverviewPanel
- description={course?.description}
- />
- )}
- </TabPane>
- <TabPane>
- {curriculum && (
- <CurriculamPanel
- curriculum={curriculum}
- courseSlug={course.slug}
- />
- )}
- </TabPane>
- <TabPane>
- <InstructorPanel {...instructor} />
- </TabPane>
- </TabContent>
- </TabContainer>
+ <TabContent className="tw-mt-10 lg:tw-mt-[50px]">
+ <TabPane>
+ {course?.description && (
+ <OverviewPanel
+ description={course?.description}
+ />
+ )}
+ </TabPane>
+ <TabPane>
+ {curriculum && (
+ <CurriculamPanel
+ curriculum={curriculum}
+ courseSlug={course.slug}
+ />
+ )}
+ </TabPane>
+ <TabPane>
+ <InstructorPanel {...instructor} />
+ </TabPane>
+ </TabContent>
+ </TabContainer>
+ </div>
  </div>
- </div>
- </section>
-</>
+ </section>
+ </>
  );
 };