Add skeleton page for collab service

Author: LemonDrew

frontend/src/app/collab/page.tsx

@@ -0,0 +1,11 @@
+import ContentPage from "../components/collab/ContentPage";
+import SessionHeader from "../components/collab/SessionHeader";
+
+export default function CollabPage() {
+  return (
+    <main className="bg-stone-900 h-screen flex flex-col items-center">
+      <SessionHeader />
+      <ContentPage />
+    </main>
+  );
+}

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

@@ -0,0 +1,15 @@
+export default function ContentPage() {
+  return (
+    <div className="text-white flex h-full w-full">
+      {/* Question Section */}
+      <div className="bg-stone-800 h-full w-[25%]"></div>
+
+      {/* Coding Section */}
+      <div className="h-full w-[50%]"></div>
+
+      {/* Chat Section */}
+
+      <div className="bg-stone-800 h-full w-[25%]"></div>
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+export default function SessionHeader() {
+  return (
+    <header className="bg-stone-800 w-full h-[5%] text-white border-b-2 border-stone-700">
+      Session Header
+    </header>
+  );
+}

frontend/src/app/components/match/SearchComponent.tsx

@@ -2,31 +2,37 @@
 
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
-import { Spinner } from '@/components/ui/shadcn-io/spinner';
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { Spinner } from "@/components/ui/shadcn-io/spinner";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 
 export default function SearchComponent() {
+  const [searchStatus, setSearchStatus] = useState(false);
 
-    const [searchStatus, setSearchStatus] = useState(false);
+  function initializeSearch() {
+    setSearchStatus(true);
+  }
 
-    function initializeSearch() {
-        setSearchStatus(true);
-    }
-
-    return ( 
-        <Dialog>
-            <DialogTrigger asChild>
-                <Button className="mb-15 w-[80%] bg-black text-white" variant="outline">Start Searching</Button>
-            </DialogTrigger>
-            <DialogContent className="w-[30%] flex flex-col items-center">
-                <DialogHeader className="flex items-center">
-                    <DialogTitle>Searching for a match....</DialogTitle>
-                    <DialogDescription>
-                        Hold on tight .....
-                    </DialogDescription>
-                </DialogHeader>
-                <Spinner variant="circle-filled"/>
-            </DialogContent>
-        </Dialog>
-    );
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button className="mb-15 w-[80%] bg-black text-white" variant="outline">
+          Start Searching
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="w-[30%] flex flex-col items-center">
+        <DialogHeader className="flex items-center">
+          <DialogTitle>Searching for a match....</DialogTitle>
+          <DialogDescription>Hold on tight .....</DialogDescription>
+        </DialogHeader>
+        <Spinner variant="circle-filled" />
+      </DialogContent>
+    </Dialog>
+  );
 }

frontend/src/app/match/page.tsx

@@ -3,7 +3,6 @@ import DifficultyComponent from "../components/match/DifficultyComponent";
 import SearchComponent from "../components/match/SearchComponent";
 
 export default function MatchPage() {
-
   return (
     <div className="h-screen flex flex-col items-center justify-center">
       <div className="text-center">

frontend/src/components/ui/shadcn-io/spinner/index.tsx

@@ -3,21 +3,21 @@ import {
   LoaderIcon,
   LoaderPinwheelIcon,
   type LucideProps,
-} from 'lucide-react';
-import { cn } from '@/lib/utils';
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 
-type SpinnerVariantProps = Omit<SpinnerProps, 'variant'>;
+type SpinnerVariantProps = Omit<SpinnerProps, "variant">;
 
 const Default = ({ className, ...props }: SpinnerVariantProps) => (
-  <LoaderIcon className={cn('animate-spin', className)} {...props} />
+  <LoaderIcon className={cn("animate-spin", className)} {...props} />
 );
 
 const Circle = ({ className, ...props }: SpinnerVariantProps) => (
-  <LoaderCircleIcon className={cn('animate-spin', className)} {...props} />
+  <LoaderCircleIcon className={cn("animate-spin", className)} {...props} />
 );
 
 const Pinwheel = ({ className, ...props }: SpinnerVariantProps) => (
-  <LoaderPinwheelIcon className={cn('animate-spin', className)} {...props} />
+  <LoaderPinwheelIcon className={cn("animate-spin", className)} {...props} />
 );
 
 const CircleFilled = ({
@@ -28,13 +28,13 @@ const CircleFilled = ({
   <div className="relative" style={{ width: size, height: size }}>
     <div className="absolute inset-0 rotate-180">
       <LoaderCircleIcon
-        className={cn('animate-spin', className, 'text-foreground opacity-20')}
+        className={cn("animate-spin", className, "text-foreground opacity-20")}
         size={size}
         {...props}
       />
     </div>
     <LoaderCircleIcon
-      className={cn('relative animate-spin', className)}
+      className={cn("relative animate-spin", className)}
       size={size}
       {...props}
     />
@@ -223,8 +223,8 @@ const Infinite = ({ size = 24, ...props }: SpinnerVariantProps) => (
       strokeLinecap="round"
       strokeWidth="10"
       style={{
-        transform: 'scale(0.8)',
-        transformOrigin: '50px 50px',
+        transform: "scale(0.8)",
+        transformOrigin: "50px 50px",
       }}
     >
       <animate
@@ -240,31 +240,31 @@ const Infinite = ({ size = 24, ...props }: SpinnerVariantProps) => (
 
 export type SpinnerProps = LucideProps & {
   variant?:
-    | 'default'
-    | 'circle'
-    | 'pinwheel'
-    | 'circle-filled'
-    | 'ellipsis'
-    | 'ring'
-    | 'bars'
-    | 'infinite';
+    | "default"
+    | "circle"
+    | "pinwheel"
+    | "circle-filled"
+    | "ellipsis"
+    | "ring"
+    | "bars"
+    | "infinite";
 };
 
 export const Spinner = ({ variant, ...props }: SpinnerProps) => {
   switch (variant) {
-    case 'circle':
+    case "circle":
       return <Circle {...props} />;
-    case 'pinwheel':
+    case "pinwheel":
       return <Pinwheel {...props} />;
-    case 'circle-filled':
+    case "circle-filled":
       return <CircleFilled {...props} />;
-    case 'ellipsis':
+    case "ellipsis":
       return <Ellipsis {...props} />;
-    case 'ring':
+    case "ring":
       return <Ring {...props} />;
-    case 'bars':
+    case "bars":
       return <Bars {...props} />;
-    case 'infinite':
+    case "infinite":
       return <Infinite {...props} />;
     default:
       return <Default {...props} />;