Add skeleton page for collab page, including the code editor

component

Author: LemonDrew

frontend/src/app/collab/page.tsx

@@ -1,11 +1,18 @@
-import ContentPage from "../components/collab/ContentPage";
+import ChatComponent from "../components/collab/ChatComponent";
+import CodingComponent from "../components/collab/CodingComponent";
+import QuestionComponent from "../components/collab/QuestionComponent";
 import SessionHeader from "../components/collab/SessionHeader";
 
 export default function CollabPage() {
   return (
-    <main className="bg-stone-900 h-screen flex flex-col items-center">
+    <main className="bg-stone-900 min-h-screen flex flex-col items-center">
       <SessionHeader />
-      <ContentPage />
+
+      <div className="flex flex-1 w-full bg-stone-800 ">
+        <QuestionComponent />
+        <CodingComponent />
+        <ChatComponent />
+      </div>
     </main>
   );
 }

frontend/src/app/components/collab/ChatComponent.tsx

@@ -0,0 +1,3 @@
+export default function ChatComponent() {
+  return <div className="h-full w-[25%]"></div>;
+}

frontend/src/app/components/collab/CodingComponent.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import Editor from "@monaco-editor/react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+
+export default function CodingComponent() {
+  const [codeContent, setCodeContent] = useState<string>("");
+  const [selectedLanguage, setSeletedLanguage] = useState<string>("Javascript");
+
+  function setInitialContent(value: string | undefined) {
+    if (value != undefined) {
+      setCodeContent(value);
+    }
+  }
+
+  return (
+    <div className="h-full w-[50%] mt-10">
+      <div className="mb-4">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button className="w-40 bg-white text-black">
+              {selectedLanguage}{" "}
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-10" align="center">
+            <DropdownMenuGroup>
+              <DropdownMenuItem>Javascript</DropdownMenuItem>
+              <DropdownMenuItem>Python</DropdownMenuItem>
+              <DropdownMenuItem>C</DropdownMenuItem>
+              <DropdownMenuItem>C++</DropdownMenuItem>
+              <DropdownMenuItem>Java</DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <Editor
+        height="85vh"
+        theme="vs-dark"
+        defaultLanguage="python"
+        defaultValue="Enter your code here..."
+        onChange={(value) => setInitialContent(value)}
+      ></Editor>
+    </div>
+  );
+}

frontend/src/app/components/collab/QuestionComponent.tsx

@@ -0,0 +1,3 @@
+export default function QuestionComponent() {
+  return <div className="h-full w-[25%]">Helo</div>;
+}