Merge pull request #40 from RbAvci/feature/Deck

NW6| Rabia Avci | React Module Project | Feature Deck - Week1

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 />

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

src/components/Card/Card.jsx

@@ -2,10 +2,12 @@ import "./Card.scss";
 
 const Card = ({ title, url, image }) => {
   return (
-    <div className="card">
+    <div className="card" data-testid="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>
   );
 };

src/components/Card/Card.scss

@@ -1,23 +1,7 @@
-// .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;
+  justify-content: space-between;
   width: 300px;
   padding: 20px;
   border: 1px solid #ccc;
@@ -33,6 +17,12 @@
   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;
@@ -49,5 +39,10 @@
 }
 
 .card a:hover {
-  background-color: #0056b3;
-}
+  background-color: #003b7a;
+  color: white;
+}
+
+.card a:focus {
+  color: white;
+}

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;

src/components/Deck/Deck.scss

@@ -3,3 +3,4 @@
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: var(--space--gap);
 }
+

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

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"
   }
 ]
+
+