remix-run
diff --git a/‎app/fake-data.ts
-42 b/‎app/fake-data.ts
-42
diff --git a/‎app/http/bad-response.ts
+10 b/‎app/http/bad-response.ts
+10
diff --git a/‎app/root.tsx
+5-4 b/‎app/root.tsx
+5-4
diff --git a/‎app/routes/board/icons.svg renamed to ‎app/routes/board.$id/icons.svg
+28-1 b/‎app/routes/board/icons.svg renamed to ‎app/routes/board.$id/icons.svg
+28-1
diff --git a/‎app/routes/board.$id/icons.tsx
+25 b/‎app/routes/board.$id/icons.tsx
+25
diff --git a/‎app/routes/board.$id/query.ts
+52 b/‎app/routes/board.$id/query.ts
+52
@@ -0,0 +1,10 @@
+export function notFound() {
+  return new Response("Not Found", { status: 404, statusText: "Not Found" });
+}
+
+export function badRequest(body: string) {
+  return new Response(body, {
+    status: 400,
+    statusText: "Bad Request",
+  });
+}
@@ -15,21 +15,22 @@ export default function App() {
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
         <link rel="stylesheet" href={stylesHref} />
         <Meta />
         <Links />
       </head>
       <body className="h-screen overflow-hidden">
-        <div className="h-full flex flex-col">
-          <div className="bg-gray-800">
+        <div className="h-full flex flex-col min-h-0">
+          <div className="bg-stone-800">
             <img
               src="/[email protected]"
               alt="Remix Logo: Colorful letters glowing on a dark background"
-              className="h-16 p-2"
+              className="h-16 py-2 px-8"
             />
           </div>
 
-          <div className="flex-grow min-h-0">
+          <div className="flex-grow min-h-0 h-full">
             <Outlet />
           </div>
         </div>
 
@@ -0,0 +1,25 @@
+import iconsHref from "./icons.svg";
+
+export function Icon({
+  name,
+  size = "md",
+  spin = false,
+}: {
+  name: string;
+  size?: "md" | "xl";
+  spin?: boolean;
+}) {
+  let classNames = {
+    md: "w-4 h-4",
+    xl: "w-8 h-8",
+  };
+  return (
+    <svg
+      className={`${classNames[size]} inline self-center ${
+        spin ? "animate-spin" : ""
+      }`}
+    >
+      <use href={`${iconsHref}#${name}`} />
+    </svg>
+  );
+}
@@ -0,0 +1,52 @@
+import { prisma } from "../../db/prisma";
+
+export async function createItem(columnId: number, title: string) {
+  let itemCountForColumn = await prisma.item.count({ where: { columnId } });
+  return prisma.item.create({
+    data: {
+      title,
+      columnId,
+      order: itemCountForColumn + 1,
+    },
+  });
+}
+
+export async function updateColumnName(id: number, name: string) {
+  return prisma.column.update({
+    where: { id },
+    data: { name },
+  });
+}
+
+export async function createEmptyColumn(boardId: number) {
+  let columnCount = await prisma.column.count({ where: { boardId } });
+  return prisma.column.create({
+    data: {
+      name: "",
+      boardId,
+      order: columnCount + 1,
+    },
+  });
+}
+
+export async function getBoardData(boardId: number) {
+  return prisma.board.findUnique({
+    where: {
+      id: boardId,
+    },
+    include: {
+      columns: {
+        include: {
+          items: {
+            orderBy: {
+              order: "asc",
+            },
+          },
+        },
+        orderBy: {
+          order: "asc",
+        },
+      },
+    },
+  });
+}