feat: setup board page

package.json

@@ -26,6 +26,7 @@
     "next": "^13.5.4",
     "next-auth": "^4.24.4",
     "react": "18.2.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "18.2.0",
     "react-icons": "^4.11.0",
     "superjson": "^1.13.1",
@@ -35,6 +36,7 @@
     "@types/eslint": "^8.44.2",
     "@types/node": "^18.16.0",
     "@types/react": "^18.2.20",
+    "@types/react-beautiful-dnd": "^13.1.7",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.3.0",
     "@typescript-eslint/parser": "^6.3.0",

src/app/boards/[...id]/page.tsx

@@ -1,15 +1,93 @@
 "use client";
 
+import { useParams } from "next/navigation";
+import { HiOutlinePlusSmall } from "react-icons/hi2";
+import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
+
 import { api } from "~/trpc/react";
 
-export default function BoardPage({ params }: { params: { id: string[] } }) {
+interface List {
-  const boardId = params.id[0];
+  publicId: string;
+  name: string;
+  cards?: Card[];
+}
+
+interface Card {
+  publicId: string;
+  title: string;
+}
+
+export default function BoardPage() {
+  const params = useParams();
+
+  const boardId = params?.id?.length && params.id[0];
 
   if (!boardId) return <></>;
 
   const { data } = api.board.byId.useQuery({ id: boardId });
 
-  console.log({ data });
+  const onDragEnd = () => null;
 
-  return <></>;
+  return (
+    <div>
+      <div className="mb-8 flex w-full justify-between">
+        <h1 className="font-medium tracking-tight text-dark-1000 sm:text-[1.2rem]">
+          {data?.name}
+        </h1>
+        <div>
+          <button
+            type="button"
+            className="inline-flex items-center gap-x-1.5 rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+          >
+            <HiOutlinePlusSmall
+              className="-mr-0.5 h-5 w-5"
+              aria-hidden="true"
+            />
+            New
+          </button>
+        </div>
+      </div>
+
+      <DragDropContext onDragEnd={onDragEnd}>
+        <div className="flex">
+          {data?.lists.map((list: List) => (
+            <Droppable key={list.publicId} droppableId={`${list.publicId}`}>
+              {(provided) => (
+                <div
+                  key={list.publicId}
+                  className="mr-5 w-72 rounded-md border border-dark-400 bg-dark-200 px-2 py-4"
+                  ref={provided.innerRef}
+                  {...provided.droppableProps}
+                >
+                  <p className="mb-4 px-4 text-sm font-medium text-dark-1000">
+                    {list.name}
+                  </p>
+
+                  {list.cards?.map((card, index) => (
+                    <Draggable
+                      key={card.publicId}
+                      draggableId={card.publicId}
+                      index={index}
+                    >
+                      {(provided) => (
+                        <div
+                          key={card.publicId}
+                          className="mb-2 rounded-md border border-dark-200 bg-dark-500 px-3 py-2"
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                          {...provided.dragHandleProps}
+                        >
+                          <p className="text-sm text-dark-1000">{card.title}</p>
+                        </div>
+                      )}
+                    </Draggable>
+                  ))}
+                </div>
+              )}
+            </Droppable>
+          ))}
+        </div>
+      </DragDropContext>
+    </div>
+  );
 }