Merge pull request #33 from areebsattar/feature-deck

NW6  |  Sabella  Fisseha  |  Feature deck

Author: areebsattar

src/components/App/App.jsx

@@ -1,5 +1,8 @@
 import Bookings from "@/components/Bookings/Bookings.jsx";
 import "./App.scss";
+
+import Deck from "../Deck/Deck";
+
 import Footer from "../Footer/Footer";
 
 const App = () => (
@@ -8,6 +11,9 @@ const App = () => (
       <h1 className="app__heading">CYF Hotel</h1>
     </header>
     <Bookings />
+
+    <Deck />
+
     <Footer
       details={[
         "123 Fake Street, London, E1 4UD",

src/components/Card/Card.jsx

@@ -7,7 +7,10 @@ const Card = (props) => {
     <div className="card">
       <h2>{title}</h2>
       <img src={image} alt={title} />
-      <a href={url}>Visit {title}</a>
+
+      <a href={url}> {title}</a>
+
+
     </div>
   );
 };

src/components/Deck/Deck.jsx

@@ -1,11 +1,20 @@
-// import Card from "@/components/Card/Card";
-// import "./Deck.scss";
-// import cardsData from "@/data/fakeCards.json";
+import Card from "@/components/Card/Card";
+import "./Deck.scss";
+import cardsData from "@/data/fakeCards.json";
 
-// const Deck = () => {
-// you will need to map over the cardsData array and render a Card component for each card object
-// how will you pass props to the Card component?
+const Deck = (props) => {
+  return (
+    <div className="deck">
+      {cardsData.map((city, index) => (
+        <Card
+          key={index}
+          title={city.title}
+          url={city.url}
+          image={city.image}
+        />
+      ))}
+    </div>
+  );
+};
 
-// };
-
-// export default Deck;
+export default Deck;

src/data/fakeCards.json

@@ -2,16 +2,16 @@
   {
     "title": "Glasgow",
     "url": "https://peoplemakeglasgow.com",
-    "image": "placeholderImage.svg"
+    "image": "https://2f1a7f9478.visitscotland.net/binaries/content/gallery/visitscotland/cms-images/2023/04/06/queens-park"
   },
   {
     "title": "Manchester",
     "url": "https://visitmanchester.com",
-    "image": "placeholderImage.svg"
+    "image": "https://media.wired.co.uk/photos/6357b98e09e6f1942a2a8a9a/16:9/w_1920,c_limit/HSBC%20MANCHESTER.jpeg"
   },
   {
     "title": "London",
     "url": "https://visitlondon.com",
-    "image": "placeholderImage.svg"
+    "image": "https://media.istockphoto.com/id/1347665170/photo/london-at-sunset.jpg?s=1024x1024&w=is&k=20&c=ogVKCS26t23fSvgCO77CC_6mhtxMDk2cmBOUQ9VamYo="
   }
 ]