feat: user and staff pages

Author: agmmtoo

app/libraries/new/error.tsx

@@ -0,0 +1,30 @@
+'use client' // Error boundaries must be Client Components
+
+import { useEffect } from 'react'
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error)
+  }, [error])
+
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <button
+        onClick={
+          // Attempt to recover by trying to re-render the segment
+          () => reset()
+        }
+      >
+        Try again
+      </button>
+    </div>
+  )
+}

app/libraries/new/page.tsx

@@ -0,0 +1,58 @@
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { createLibrary } from '@/lib/api/library'
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb'
+import Link from 'next/link'
+import { redirect } from 'next/navigation'
+
+export default function NewLibrary() {
+  async function create(formData: FormData) {
+    'use server'
+
+    const name = formData.get('name') as string
+
+    await createLibrary({
+      name,
+    })
+
+    redirect('/libraries')
+  }
+
+  return (
+    <div className="space-y-4">
+      <h1 className="text-2xl font-semibold">Create Library</h1>
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <Link href="/" passHref legacyBehavior>
+              <BreadcrumbLink>Home</BreadcrumbLink>
+            </Link>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <Link href="/libraries" passHref legacyBehavior>
+              <BreadcrumbLink>Libraries</BreadcrumbLink>
+            </Link>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Create a Library</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+
+      <form action={create} className="space-y-4 md:max-w-[40%]">
+        <Input name="name" placeholder="Name" required />
+        <Button type="submit">Create</Button>
+      </form>
+    </div>
+  )
+}

app/libraries/page.tsx

@@ -6,6 +6,7 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb'
+import { Button } from '@/components/ui/button'
 import {
   Pagination,
   PaginationContent,
@@ -58,20 +59,25 @@ export default async function Libraries({
   return (
     <div>
       <h1 className="text-2xl font-semibold">Libraries</h1>
-      <Breadcrumb>
-        <BreadcrumbList>
-          <BreadcrumbItem>
-            <Link href="/" passHref legacyBehavior>
-              <BreadcrumbLink>Home</BreadcrumbLink>
-            </Link>
-          </BreadcrumbItem>
-          <BreadcrumbSeparator />
+      <div className="flex justify-between items-center">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <Link href="/" passHref legacyBehavior>
+                <BreadcrumbLink>Home</BreadcrumbLink>
+              </Link>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
 
-          <BreadcrumbItem>
-            <BreadcrumbPage>Libraries</BreadcrumbPage>
-          </BreadcrumbItem>
-        </BreadcrumbList>
-      </Breadcrumb>
+            <BreadcrumbItem>
+              <BreadcrumbPage>Libraries</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <Button asChild>
+          <Link href="/libraries/new">Create a Library</Link>
+        </Button>
+      </div>
 
       <Table>
         {/* <TableCaption>List of books available in the library.</TableCaption> */}