feat: book cover in borrowing

Author: agmmtoo

app/(protected)/books/page.tsx

@@ -26,6 +26,7 @@ import { getListBooks } from '@/lib/api/book'
 import Link from 'next/link'
 import type { Metadata } from 'next'
 import { SITE_NAME } from '@/lib/consts'
+import Image from 'next/image'
 
 export const metadata: Metadata = {
   title: `Books · ${SITE_NAME}`,
@@ -91,6 +92,7 @@ export default async function Books({
         {/* <TableCaption>List of books available in the library.</TableCaption> */}
         <TableHeader>
           <TableRow>
+            <TableHead>Cover</TableHead>
             <TableHead>Code</TableHead>
             <TableHead>Title</TableHead>
             <TableHead>Library</TableHead>
@@ -101,6 +103,19 @@ export default async function Books({
         <TableBody>
           {res.data.map((b) => (
             <TableRow key={b.id}>
+              <TableCell>
+                {b.cover && (
+                  <div className="w-12 h-auto">
+                    <Image
+                      src={b.cover}
+                      alt={b.title + "'s cover"}
+                      width={50}
+                      height={50}
+                      className="rounded"
+                    />
+                  </div>
+                )}
+              </TableCell>
               <TableCell>{b.code}</TableCell>
               <TableCell>{b.title}</TableCell>
               <TableCell>{b.library?.name}</TableCell>

app/(protected)/borrows/[id]/page.tsx

@@ -18,6 +18,7 @@ import { Cardstaff } from '@/components/staffs/CardStaff'
 import { Cardsubscription } from '@/components/subscriptions/CardSubscription'
 import { CardMembership } from '@/components/memberships/CardMembership'
 import { BtnReturnBook } from '@/components/borrows/BtnReturnBorrow'
+import Image from 'next/image'
 
 export default async function BorrowDetailsPage({
   params,
@@ -78,6 +79,15 @@ export default async function BorrowDetailsPage({
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        {borrowRes.data.book?.cover && (
+          <Image
+            src={borrowRes.data.book.cover}
+            alt={borrowRes.data.book.title + "'s cover"}
+            width={256}
+            height={256}
+            className="rounded-lg w-56 h-auto place-self-center row-span-2"
+          />
+        )}
         <CardBorrow borrow={borrowRes.data} />
         <CardBook book={borrowRes.data.book} />
         <Carduser user={borrowRes.data.subscription.user} />

app/(protected)/libraries/[id]/page.tsx

@@ -79,9 +79,9 @@ export default async function LibraryDetail({
           <Image
             src={libRes.data.logo}
             alt={libRes.data.name}
-            width={400}
-            height={400}
-            className="rounded-lg w-auto h-auto"
+            width={256}
+            height={256}
+            className="rounded-lg w-56 h-auto"
           />
         )}
         <div className="">
@@ -102,7 +102,7 @@ export default async function LibraryDetail({
         </div>
       </div>
 
-      <div className="grid md:grid-cols-2 gap-4">
+      <div className="grid md:grid-cols-2 gap-4 ">
         <div className="border border-gray-200 my-4">
           <Table>
             <TableCaption>Latest added books from the library.</TableCaption>

lib/types/book.ts

@@ -6,6 +6,7 @@ export type Book = WithCommon<{
   author: string
   year: number
   code: string
+  cover?: string
   library_id: string
   library?: Pick<Library, 'id' | 'name'>
 }>