Create Detailed Book Page + fixes

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>

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>
+    )
+}

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>