feature active row

Author: Sabella-8

src/components/SearchResult/SearchResult.scss

@@ -7,9 +7,7 @@ thead {
   background-color: rgb(31, 11, 31);
   color: white;
 }
-tbody tr:hover {
-  background-color: skyblue;
-}
+
 th,
 td {
   padding: 8px;
@@ -20,6 +18,9 @@ td {
 th {
   font-weight: bold;
 }
-tr:nth-child(even) {
-  background-color: #f2f2f2;
+.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>