Merge pull request #43 from areebsattar/Feature-Active-row

NW6 | Sabella Fisseha | Feature active row

Author: areebsattar

src/components/Card/Card.jsx

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

src/components/Card/Card.scss

@@ -1,16 +1,27 @@
 .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);
+  display: flex;
+  flex-direction: column;
+}
 
-  &__title {
-    grid-area: title;
-  }
-  &__image {
-    grid-area: image;
-    mix-blend-mode: overlay;
-  }
+h2 {
+  text-align: center;
+  font-size: 2em;
+}
+h2:hover {
+  background-color: rgb(26, 3, 26);
+  color: white;
+}
+.cardhref {
+  font-size: 2em;
+  font-weight: bold;
+  color: rgb(255, 255, 255);
+  text-decoration: none;
+  position: relative;
+  top: -40%;
+  text-align: center;
+}
+.cardhref:hover {
+  background-color: skyblue;
+  opacity: 0.7;
+  color: black;
 }

src/components/Search/Search.scss

@@ -3,6 +3,7 @@
     display: flex;
     gap: var(--space--gap);
     align-items: stretch;
+    margin-bottom: 15px;
   }
   &__label {
     align-self: center;

src/components/SearchButton/SearchButton.scss

@@ -0,0 +1,3 @@
+.button {
+  margin-bottom: 10px;
+}

src/components/SearchResult/SearchResult.scss

@@ -4,7 +4,8 @@ table {
 }
 
 thead {
-  background-color: #f2f2f2;
+  background-color: rgb(31, 11, 31);
+  color: white;
 }
 
 th,
@@ -17,3 +18,9 @@ td {
 th {
   font-weight: bold;
 }
+.table-row {
+  cursor: pointer;
+}
+.selected {
+  background-color: skyblue;
+}

src/components/SearchResult/TableBody.jsx

@@ -1,6 +1,11 @@
-// import FakeBookings from "@/data/fakeBookings.json";
-
+import FakeBookings from "@/data/fakeBookings.json";
+import React from "react";
+import { useState } from "react";
 function TableBody(props) {
+  const [selectedRow, setSelectedRow] = useState("unselect");
+  function handleSelect() {
+    setSelectedRow(selectedRow === "unselect" ? "selected" : "unselect");
+  }
   let {
     id,
     title,
@@ -15,7 +20,11 @@ function TableBody(props) {
   } = props;
   return (
     <>
-      <tr key={id}>
+      <tr
+        key={id}
+        onClick={handleSelect}
+        className={`table-row  ${selectedRow}`}
+      >
         <td>{id}</td>
         <td>{title}</td>
         <td>{firstName}</td>