From 1f8f1793a95ccd02783e32405000bfc74b87a2ba Mon Sep 17 00:00:00 2001
From: "Rayyan (Rayy)" <rayyan.hodges@studytafensw.edu.au>
Date: Tue, 17 Oct 2023 10:00:13 +0000
Subject: [PATCH] Adding book info cards to homepage

---
 src/pages/Home.js | 41 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/pages/Home.js b/src/pages/Home.js
index 41f894c..d99b1fb 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -1,3 +1,42 @@
+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 } from "react"
+
 export function Home ( props ) {
-    return ( <h1>{props.greeting} </h1>)
+    const [ books, setBooks ] = useState([])
+
+    useEffect( () => {
+    setBooks( props.items )
+    console.log( props.items )
+    },[props.items])
+
+    // collection
+    const Items = books.map( (item, key) => {
+        return (
+            <Col key={key} md="4">
+                <Card>
+                    <Card.Body>
+                        <Card.Title>{item.book_title}</Card.Title>
+                       <Card.Text>
+                       By {item.author}
+                        </Card.Text>
+                    </Card.Body>
+                </Card>
+
+            </Col>
+        )
+    })
+
+
+    return (
+        <Container>
+            <Row>
+                {Items}
+            </Row>
+        </Container>
+
+    )
 }
\ No newline at end of file