From f12f48af52c6745abe3ec0b7b5da7018cb6a22c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sergio=20Go=CC=81mez=20Bachiller?= <sergio@uco.es>
Date: Wed, 22 Nov 2023 17:35:19 +0100
Subject: [PATCH] feat: add borrow button

---
 src/components/Book/Book.tsx       | 31 +++++++++++++++++++++++++++---
 stories/components/Book.stories.ts | 17 ++++++++++++++++
 2 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/src/components/Book/Book.tsx b/src/components/Book/Book.tsx
index 1e47fcc..3e65286 100644
--- a/src/components/Book/Book.tsx
+++ b/src/components/Book/Book.tsx
@@ -1,13 +1,37 @@
-import { Card, CardBody, CardFooter, Image } from '@nextui-org/react'
+import {
+  Avatar,
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  Image,
+} from '@nextui-org/react'
+
+import { FindUserResponse } from '@/core/user/application/types'
+import gravatar from '@/lib/utils/gravatar'
 
 export interface BookProps {
   authors: string[]
+  id: string
   image: string
+  onBorrow: (id: string) => void
+  reader: FindUserResponse | null
   title: string
 }
 
 export default function Book(props: BookProps) {
-  const { authors, image, title } = props
+  const { authors, id, image, onBorrow, reader, title } = props
+
+  const footer = reader ? (
+    <div className="flex flex-row-reverse w-full gap-4 items-center">
+      <Avatar src={gravatar(reader.email || '')} />
+      <div>Prestado a</div>
+    </div>
+  ) : (
+    <div className="flex flex-row-reverse w-full">
+      <Button onClick={() => onBorrow(id)}>Reservar</Button>
+    </div>
+  )
 
   return (
     <>
@@ -15,11 +39,12 @@ export default function Book(props: BookProps) {
         <CardBody className="h-[400px] overflow-y-hidden object-center">
           <Image alt={title} width={297} height={387} src={image} />
         </CardBody>
-        <CardFooter className="flex flex-col items-start gap-4 h-[150px]">
+        <CardFooter className="flex flex-col items-start gap-4 h-[180px]">
           <div className="line-clamp-2 overflow-hidden text-ellipsis text-xl font-bold">
             {title}
           </div>
           <div className="text-sm">{authors.join(', ')}</div>
+          {footer}
         </CardFooter>
       </Card>
     </>
diff --git a/stories/components/Book.stories.ts b/stories/components/Book.stories.ts
index 865f4a2..fcb9ed9 100644
--- a/stories/components/Book.stories.ts
+++ b/stories/components/Book.stories.ts
@@ -13,7 +13,24 @@ type Story = StoryObj<typeof meta>
 export const Basic: Story = {
   args: {
     authors: ['Martin Kleppmann'],
+    id: '23423432',
     image: 'https://m.media-amazon.com/images/I/91YfNb49PLL._SL1500_.jpg',
+    reader: null,
+    title: 'Designing Data-Intensive Applications',
+  },
+}
+
+export const Borrowed: Story = {
+  args: {
+    authors: ['Martin Kleppmann'],
+    id: '23423432',
+    image: 'https://m.media-amazon.com/images/I/91YfNb49PLL._SL1500_.jpg',
+    reader: {
+      email: 'johndoe@example.com',
+      image: '',
+      name: 'John Doe',
+      roles: ['ROLE_USER'],
+    },
     title: 'Designing Data-Intensive Applications',
   },
 }