feat: empty boards and lists state

apps/web/src/views/boards/components/BoardsList.tsx

@@ -1,11 +1,15 @@
 import Link from "next/link";
+import { HiOutlineRectangleStack } from "react-icons/hi2";
 
+import Button from "~/components/Button";
 import PatternedBackground from "~/components/PatternedBackground";
+import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
 
 export function BoardsList() {
   const { workspace } = useWorkspace();
+  const { openModal } = useModal();
 
   const { data, isLoading } = api.board.all.useQuery(
     { workspacePublicId: workspace.publicId },
@@ -21,7 +25,21 @@ export function BoardsList() {
       </div>
     );
 
-  if (data?.length === 0) return <></>;
+  if (data?.length === 0)
+    return (
+      <div className="z-10 flex h-full w-full flex-col items-center justify-center space-y-8 pb-[150px]">
+        <div className="flex flex-col items-center">
+          <HiOutlineRectangleStack className="h-10 w-10 text-light-800 dark:text-dark-800" />
+          <p className="mb-2 mt-4 text-[14px] font-bold text-light-1000 dark:text-dark-950">
+            No boards
+          </p>
+          <p className="text-[14px] text-light-900 dark:text-dark-900">
+            Get started by creating a new board
+          </p>
+        </div>
+        <Button onClick={() => openModal("NEW_BOARD")}>Create new board</Button>
+      </div>
+    );
 
   return (
     <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xxl:grid-cols-5">

apps/web/src/views/boards/index.tsx

@@ -16,7 +16,7 @@ export default function BoardsPage() {
   return (
     <>
       <PageHead title={`Boards | ${workspace.name ?? "Workspace"}`} />
-      <div className="p-8">
+      <div className="h-full p-8">
         <div className="mb-8 flex w-full justify-between">
           <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
             Boards
@@ -57,7 +57,7 @@ export default function BoardsPage() {
           {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
         </Modal>
 
-        <div className="flex flex-row">
+        <div className="flex h-full flex-row">
           <BoardsList />
         </div>
       </div>