separate dashboard page components

frontend/components/dashboard/index.tsx

@@ -18,6 +18,8 @@ import ProjectCard from "./projectCard"
 import { Sandbox } from "@/lib/types"
 import Image from "next/image"
 import ProjectCardDropdown from "./projectCard/dropdown"
+import DashboardProjects from "./projects"
+import DashboardSharedWithMe from "./shared"
 
 type TScreen = "projects" | "shared" | "settings" | "search"
 
@@ -51,7 +53,7 @@ export default function Dashboard({ sandboxes }: { sandboxes: Sandbox[] }) {
             className={activeScreen("shared")}
           >
             <Users className="w-4 h-4 mr-2" />
-            Shared Rooms
+            Shared With Me
           </Button>
           <Button
             variant="ghost"
@@ -80,37 +82,10 @@ export default function Dashboard({ sandboxes }: { sandboxes: Sandbox[] }) {
         </div>
       </div>
       {screen === "projects" ? (
-        <div className="grow p-4 grid lg:grid-cols-3 2xl:grid-cols-4  md:grid-cols-2 gap-4">
-          {sandboxes.map((sandbox) => (
-            <ProjectCard key={sandbox.id}>
-              <div className="space-x-2 flex items-center justify-start w-full">
-                <Image
-                  alt=""
-                  src={
-                    sandbox.type === "react"
-                      ? "/project-icons/react.svg"
-                      : "/project-icons/node.svg"
-                  }
-                  width={20}
-                  height={20}
-                />
-                <div className="font-medium static whitespace-nowrap w-full text-ellipsis overflow-hidden">
-                  {sandbox.name}
-                </div>
-                <ProjectCardDropdown sandbox={sandbox} />
-              </div>
-              <div className="flex flex-col text-muted-foreground space-y-0.5 text-sm">
-                <div className="flex items-center">
-                  <Globe className="w-3 h-3 mr-2" /> Public
-                </div>
-                <div className="flex items-center">
-                  <Clock className="w-3 h-3 mr-2" /> 3d ago
-                </div>
-              </div>
-            </ProjectCard>
-          ))}
-        </div>
-      ) : screen === "shared" ? null : screen === "settings" ? null : null}
+        <DashboardProjects sandboxes={sandboxes} />
+      ) : screen === "shared" ? (
+        <DashboardSharedWithMe sandboxes={sandboxes} />
+      ) : screen === "settings" ? null : null}
     </div>
   )
 }