project page

src/app/projects/page.tsx

@@ -1,12 +1,87 @@
 'use client'
 
-import { usePathname } from "next/navigation"
+import { trpc } from "~/app/_trpc/Client";
+import * as Card from "~/components/ui/card";
+import { Badge } from "~/components/ui/badge";
+import { StackBadge } from "~/components/StackBadge";
+
+export default function ProjectsPage() {
+  const { data: projects, isLoading } = trpc.projectv2.listWithStack.useQuery();
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center min-h-[200px] text-muted-foreground">
+        Loading...
+      </div>
+    );
+  }
+
+  if (!projects?.length) {
+    return (
+      <div className="flex justify-center items-center min-h-[200px] text-muted-foreground">
+        No projects yet.
+      </div>
+    );
+  }
 
-export default function Page() {
-  const pathName = usePathname()
   return (
-    <div>
-      {pathName}
+    <div className="w-full max-w-4xl mx-auto px-4 py-8 flex flex-col gap-4">
+      {projects.map((project) => (
+        <Card.Card key={project.id}>
+          <Card.CardHeader>
+            <div className="flex items-start justify-between gap-2 flex-wrap">
+              <Card.CardTitle>{project.title}</Card.CardTitle>
+              <div className="flex gap-2 flex-wrap">
+                {project.sourceType && (
+                  <Badge variant={project.sourceType === "open" ? "secondary" : "outline"}>
+                    {project.sourceType === "open" ? "Open Source" : "Closed Source"}
+                  </Badge>
+                )}
+                {project.releaseStatus && (
+                  <Badge variant={project.releaseStatus === "released" ? "default" : "outline"}>
+                    {project.releaseStatus === "released" ? "Released" : "Unreleased"}
+                  </Badge>
+                )}
+              </div>
+            </div>
+          </Card.CardHeader>
+          {(project.sourceLink || project.releaseLink || project.techStack?.stackItems?.length) && (
+            <Card.CardContent className="flex flex-col gap-3">
+              {(project.sourceLink || project.releaseLink) && (
+                <div className="flex gap-3 flex-wrap">
+                  {project.sourceLink && (
+                    <a
+                      href={project.sourceLink}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-sm text-muted-foreground hover:text-foreground underline underline-offset-4 transition-colors"
+                    >
+                      Source
+                    </a>
+                  )}
+                  {project.releaseLink && (
+                    <a
+                      href={project.releaseLink}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-sm text-muted-foreground hover:text-foreground underline underline-offset-4 transition-colors"
+                    >
+                      Live
+                    </a>
+                  )}
+                </div>
+              )}
+              {project.techStack?.stackItems && project.techStack.stackItems.length > 0 && (
+                <div className="flex flex-wrap gap-1.5">
+                  {project.techStack.stackItems.map((item) => (
+                    <StackBadge key={item} item={item} />
+                  ))}
+                </div>
+              )}
+            </Card.CardContent>
+          )}
+        </Card.Card>
+      ))}
     </div>
-  )
+  );
 }