Fix styling and add chat component

Author: LemonDrew

frontend/src/app/collab/page.tsx

@@ -9,9 +9,19 @@ export default function CollabPage() {
       <SessionHeader />
 
       <div className="flex flex-1 w-full bg-stone-800 ">
-        <QuestionComponent />
-        <CodingComponent />
-        <ChatComponent />
+        
+        <div className="flex-1">
+          <QuestionComponent/>
+        </div>
+        
+        <div className="flex-[2] h-full">
+          <CodingComponent/>
+        </div>
+
+        <div className="flex-1 p-5">
+          <ChatComponent/>
+        </div>
+
       </div>
     </main>
   );

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

@@ -1,3 +1,24 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ChevronRightIcon } from "lucide-react";
+
 export default function ChatComponent() {
-  return <div className="h-full w-[25%]"></div>;
+
+    const chatMessages = ["HELLO", "HOW ARE YOU?"]
+
+    return (
+        <div className="flex flex-col h-full bg-stone-900 p-10">
+
+            <div className="flex bg-stone-500 h-full mb-5 rounded-lg">
+
+            </div>
+
+            <div className="flex w-full mt-auto gap-2">
+                <Input className="bg-white" />
+                <Button variant="secondary" size="icon" className="size-9">
+                    <ChevronRightIcon/>
+                </Button>
+            </div>
+        </div>
+    );
 }

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

@@ -6,21 +6,15 @@ import {
   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";
+import { ChevronDown } from "lucide-react";
 
 export default function CodingComponent() {
   const [codeContent, setCodeContent] = useState<string>("");
-  const [selectedLanguage, setSeletedLanguage] = useState<string>("Javascript");
+  const [selectedLanguage, setSeletedLanguage] = useState<string>("JavaScript");
 
   function setInitialContent(value: string | undefined) {
     if (value != undefined) {
@@ -29,30 +23,41 @@ export default function CodingComponent() {
   }
 
   return (
-    <div className="h-full w-[50%] mt-10">
+    <div className="h-full  mt-10">
       <div className="mb-4">
         <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button className="w-40 bg-white text-black">
-              {selectedLanguage}{" "}
+          <DropdownMenuTrigger asChild className="flex justify-between">
+            <Button className="w-40 bg-white text-black hover:bg-gray-500">
+              {selectedLanguage} <ChevronDown />
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="w-10" align="center">
+          <DropdownMenuContent className="w-10" align="start">
             <DropdownMenuGroup>
-              <DropdownMenuItem>Javascript</DropdownMenuItem>
-              <DropdownMenuItem>Python</DropdownMenuItem>
-              <DropdownMenuItem>C</DropdownMenuItem>
-              <DropdownMenuItem>C++</DropdownMenuItem>
-              <DropdownMenuItem>Java</DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => setSeletedLanguage("JavaScript")}
+              >
+                Javascript
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setSeletedLanguage("Python")}>
+                Python
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setSeletedLanguage("C")}>
+                C
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setSeletedLanguage("C++")}>
+                C++
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setSeletedLanguage("Java")}>
+                Java
+              </DropdownMenuItem>
             </DropdownMenuGroup>
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
       <Editor
         height="85vh"
         theme="vs-dark"
-        defaultLanguage="python"
-        defaultValue="Enter your code here..."
+        defaultLanguage={selectedLanguage.toLowerCase()}
         onChange={(value) => setInitialContent(value)}
       ></Editor>
     </div>

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

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