From f3e076e4503e242af9f8a5b7fb7ad2352eb620fe Mon Sep 17 00:00:00 2001
From: "Rayyan (Rayy)" <rayyan.hodges@studytafensw.edu.au>
Date: Tue, 14 Nov 2023 08:14:38 +0000
Subject: [PATCH] Create Detailed Book Page + fixes

---
 src/App.js          |  3 ++-
 src/pages/Detail.js | 22 ++++++++++++++++++++++
 src/pages/Home.js   |  7 +++++--
 3 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/Detail.js

diff --git a/src/App.js b/src/App.js
index 1e4acac..990deba 100644
--- a/src/App.js
+++ b/src/App.js
@@ -22,7 +22,7 @@ import { Contact } from "./pages/Contact"
 import { Signup } from "./pages/Signup"
 import { Signout } from "./pages/Signout"
 import { Signin } from "./pages/Signin"
-
+import { Detail } from "./pages/Detail";
 // contexts
 import { AuthContext } from "./contexts/AuthContext"
 import { StorageContext } from "./contexts/StorageContext";
@@ -141,6 +141,7 @@ const readData = async () => {
           <Route path="/signup" element={ <Signup handler={signUp}/> } />
           <Route path="/signout" element={ <Signout handler={logOut}/> } />
           <Route path="/signin" element={ <Signin handler={signIn} authstate={auth}/> } />
+          <Route path="/detail/:id" element={<Detail/>} />
         </Routes>
         </StorageContext.Provider>
         </AuthContext.Provider>
diff --git a/src/pages/Detail.js b/src/pages/Detail.js
new file mode 100644
index 0000000..b19d52c
--- /dev/null
+++ b/src/pages/Detail.js
@@ -0,0 +1,22 @@
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Container from "react-bootstrap/Container";
+
+import { useParams } from 'react-router-dom';
+
+export function Detail(props) {
+    let { id } = useParams();
+    return(
+        <Container>
+            <Row>
+                <Col md={6}>
+                <h1>Image</h1>
+                </Col>
+                <Col md={6}>
+                <h2>Details</h2>
+                <p>{id}</p>
+                </Col>
+            </Row>
+        </Container>
+    )
+}
\ No newline at end of file
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 469ffb0..58c23e8 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -16,9 +16,12 @@ export function Home(props) {
   
   
     const ItemCards = books.map( ( book, itemkey ) => {
+      const itemLink = `/detail/${book.id}`
       return(
-        <Col md={4}>
-          <Card key={itemkey}>
+        <Col md={4} className="mb-4">
+          <Card key={itemkey} className="position-relative">
+            <a href={itemLink} className="position-absolute" style={{top:0, left:0, right:0, bottom:0}}>
+            </a>
             <ItemImage source={ book.cover_image} />
             <Card.Body>
               <Card.Title>{ book.book_title }</Card.Title>