From 10d0dcf8ffc78d6224b084ae942a15ac74211f2e Mon Sep 17 00:00:00 2001
From: RbAvci <rb.avci@gmail.com>
Date: Sun, 3 Mar 2024 21:00:07 +0000
Subject: [PATCH 1/4] implemented deck component

---
 src/components/App/App.jsx    |  6 +++---
 src/components/Card/Card.jsx  |  6 ++++--
 src/components/Card/Card.scss | 11 +++++++++++
 src/components/Deck/Deck.jsx  | 22 +++++++++++++---------
 src/components/Deck/Deck.scss |  1 +
 src/data/fakeCards.json       |  8 +++++---
 6 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
index 5f301e4..1670de8 100644
--- a/src/components/App/App.jsx
+++ b/src/components/App/App.jsx
@@ -1,14 +1,14 @@
 import Bookings from "@/components/Bookings/Bookings.jsx";
 import "./App.scss";
 import AppHeader from "../AppHeader/AppHeader.jsx";
-import Card from "../Card/Card";
 import Footer from "../Footer/Footer";
+import Deck from "../Deck/Deck";
 import Restaurant from "../Restaurant/Restaurant.jsx";
 
 const App = () => (
   <div className="app">
-    <AppHeader />
-    <Card title="Welcome to CYF Hotel" url="https://cyf-hotel.com" image="https://cyf-hotel.com/images/banner.jpg" />
+    <AppHeader/>
+    <Deck/>
     <Bookings />
     <Restaurant />
     <Footer />
diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
index 8494ee6..bcf0833 100644
--- a/src/components/Card/Card.jsx
+++ b/src/components/Card/Card.jsx
@@ -4,8 +4,10 @@ const Card = ({ title, url, image }) => {
   return (
     <div className="card">
       <img src={image} alt={title} />
-      <h2>{title}</h2>
-      <a href={url}>Visit website</a>
+      <div className="card-body">
+        <h2>{title}</h2>
+        <a href={url}>Visit website</a>
+      </div>
     </div>
   );
 };
diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss
index 812c537..266883f 100644
--- a/src/components/Card/Card.scss
+++ b/src/components/Card/Card.scss
@@ -18,6 +18,9 @@
 
 /* Card.css */
 .card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   width: 300px;
   padding: 20px;
   border: 1px solid #ccc;
@@ -33,11 +36,19 @@
   margin-bottom: 15px;
 }
 
+.card-body{
+display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+}
 .card h2 {
   font-size: 1.5rem;
   margin-bottom: 10px;
 }
 
+
 .card a {
   display: inline-block;
   padding: 8px 16px;
diff --git a/src/components/Deck/Deck.jsx b/src/components/Deck/Deck.jsx
index 9760d2b..3043ead 100644
--- a/src/components/Deck/Deck.jsx
+++ b/src/components/Deck/Deck.jsx
@@ -1,11 +1,15 @@
-// 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 = () => {
+    return (
+      <div className="deck">
+        {cardsData.map((cardData, i) => (
+          <Card title={cardData.title} url={cardData.url} image={cardData.image} key={i} />
+        ))}
+      </div>
+    );
+};
 
-// };
-
-// export default Deck;
+export default Deck;
diff --git a/src/components/Deck/Deck.scss b/src/components/Deck/Deck.scss
index 0911f0b..f74267f 100644
--- a/src/components/Deck/Deck.scss
+++ b/src/components/Deck/Deck.scss
@@ -3,3 +3,4 @@
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: var(--space--gap);
 }
+
diff --git a/src/data/fakeCards.json b/src/data/fakeCards.json
index f8e5dfa..85fb56f 100644
--- a/src/data/fakeCards.json
+++ b/src/data/fakeCards.json
@@ -2,16 +2,18 @@
   {
     "title": "Glasgow",
     "url": "https://peoplemakeglasgow.com",
-    "image": "placeholderImage.svg"
+    "image": "https://img.freepik.com/free-vector/glasgow-scotland-uk-silhouette-skyline-with-panorama-sky-background-vector-illustration-business-travel-tourism-concept-with-modern-buildings-image-banner-website_596401-579.jpg?w=2000&t=st=1709255793~exp=1709256393~hmac=fd697d325632983bcbbf1907e0ac5e5dfd0053260b437123ebc3c3c8132d7e6a"
   },
   {
     "title": "Manchester",
     "url": "https://visitmanchester.com",
-    "image": "placeholderImage.svg"
+    "image": "https://img.freepik.com/free-vector/manchester-england-skyline-with-panorama-white-background-vector-illustration-business-travel-tourism-concept-with-modern-buildings-image-banner-web-site_596401-57.jpg?w=2000&t=st=1709255885~exp=1709256485~hmac=907837286b58edf902a049435029bd8869963ac1aea6dbb00ec39dfebfb9e53f"
   },
   {
     "title": "London",
     "url": "https://visitlondon.com",
-    "image": "placeholderImage.svg"
+    "image":"https://img.freepik.com/free-vector/red-skyline-london_23-2147777055.jpg?t=st=1709256433~exp=1709260033~hmac=cba412615bc8ac13cd283fc9e0c058f5e03f95c8e52a84d6b30b5553826b91dd&w=1480"
   }
 ]
+
+

From 0a7ffe56e0f9e62658bd51e858d7c40bbee455e6 Mon Sep 17 00:00:00 2001
From: RbAvci <rb.avci@gmail.com>
Date: Sun, 3 Mar 2024 21:47:32 +0000
Subject: [PATCH 2/4] add css styling

---
 src/components/Card/Card.scss | 34 +++++++++-------------------------
 1 file changed, 9 insertions(+), 25 deletions(-)

diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss
index 266883f..62da274 100644
--- a/src/components/Card/Card.scss
+++ b/src/components/Card/Card.scss
@@ -1,22 +1,3 @@
-// .card {
-//   display: grid;
-//   grid-template:
-//     "image image image" 1fr
-//     ". title ." auto / var(--space--gap) 1fr var(--space--gap);
-//   border: var(--border);
-//   border-color: var(--color--accent);
-
-//   &__title {
-//     grid-area: title;
-//   }
-//   &__image {
-//     grid-area: image;
-//     mix-blend-mode: overlay;
-//   }
-// }
-
-
-/* Card.css */
 .card {
   display: flex;
   flex-direction: column;
@@ -36,19 +17,17 @@
   margin-bottom: 15px;
 }
 
-.card-body{
-display: flex;
+.card-body {
+  display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-
 }
 .card h2 {
   font-size: 1.5rem;
   margin-bottom: 10px;
 }
 
-
 .card a {
   display: inline-block;
   padding: 8px 16px;
@@ -60,5 +39,10 @@ display: flex;
 }
 
 .card a:hover {
-  background-color: #0056b3;
-}
\ No newline at end of file
+  background-color: #003b7a;
+  color: white;
+}
+
+.card a:focus {
+  color: white;
+}

From f5217b5b9ff95c5084b6ec406ba49d899c574d63 Mon Sep 17 00:00:00 2001
From: RbAvci <rb.avci@gmail.com>
Date: Sun, 3 Mar 2024 22:00:19 +0000
Subject: [PATCH 3/4] added deck tests

---
 src/components/Card/Card.jsx      |  2 +-
 src/components/Deck/Deck.test.jsx | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
index bcf0833..57984a8 100644
--- a/src/components/Card/Card.jsx
+++ b/src/components/Card/Card.jsx
@@ -2,7 +2,7 @@ import "./Card.scss";
 
 const Card = ({ title, url, image }) => {
   return (
-    <div className="card">
+    <div className="card" data-testid="card">
       <img src={image} alt={title} />
       <div className="card-body">
         <h2>{title}</h2>
diff --git a/src/components/Deck/Deck.test.jsx b/src/components/Deck/Deck.test.jsx
index c6f7535..5b4b17e 100644
--- a/src/components/Deck/Deck.test.jsx
+++ b/src/components/Deck/Deck.test.jsx
@@ -1,9 +1,19 @@
 import Deck from "./Deck.jsx";
 import { describe, it, expect } from "vitest";
 import { render, screen } from "@testing-library/react";
+import cardsData from "@/data/fakeCards.json";
 
 describe("Deck", () => {
-  it("should have a test, please write one", () => {
-    return true;
+  it("renders correct card contents", () => {
+    render(<Deck />);
+
+    const cards = screen.getAllByTestId("card");
+
+    cardsData.forEach((cardData, index) => {
+      const cardElement = cards[index];
+      expect(cardElement).toHaveTextContent(cardData.title);
+      expect(cardElement.querySelector("a")).toHaveAttribute("href", cardData.url);
+      expect(cardElement.querySelector("img")).toHaveAttribute("src", cardData.image);
+    });
   });
 });

From 3dce7c9c969bc80ce40b2bde8b349244d7f5c12a Mon Sep 17 00:00:00 2001
From: RbAvci <rb.avci@gmail.com>
Date: Wed, 6 Mar 2024 01:05:39 +0000
Subject: [PATCH 4/4] fix app components margin bottom

---
 src/components/App/App.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/App/App.scss b/src/components/App/App.scss
index 69b6530..83e8a7f 100644
--- a/src/components/App/App.scss
+++ b/src/components/App/App.scss
@@ -4,5 +4,6 @@
   display: grid;
   max-width: var(--space--container);
   margin: auto;
+  margin-bottom: 7rem;
   padding: var(--space--gap);
 }