Copy Code from Book Club to Movie Club and modify code accordingly

src/App.js

@@ -22,6 +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"
@@ -142,6 +143,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/components/ItemImage.js

@@ -29,7 +29,7 @@ export function ItemImage ( props ) {
   }
   else {
     return (
-      <Card.Img variant='top' src={image} />
+      <Card.Img style={{aspectRatio: "3/4"}} variant='top' src={image} />
     )
   }
 }

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

@@ -2,8 +2,6 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Container from "react-bootstrap/Container";
 import Card from "react-bootstrap/Card";
-
-
 import { useState, useEffect, useContext } from "react"
 import { ItemImage } from "../components/ItemImage"
 
@@ -18,11 +16,15 @@ export function Home(props) {
   
   
     const ItemCards = movies.map( ( movie, itemkey ) => {
+      const itemLink = `/detail/${movie.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={ movie.cover_image} />
             <Card.Body>
+              <Card.Title>{ movie.movie_title }</Card.Title>
               <Card.Title>{ movie.title }</Card.Title>
             </Card.Body>
           </Card>