done

package.json

@@ -8,7 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.css

@@ -1,38 +1,61 @@
-.App {
-  text-align: center;
+.search {
+  align-items: center;
+  min-width: 560px;
+  margin: 10px;
+}
+.searchbar {
+  height: 30px;
+  max-width: auto;
+  border: 1.5px solid #009879;
+  background-color: rgb(234, 232, 232);
+}
+* {
+  /* Change your font family */
+  font-family: sans-serif;
+  max-width: auto;
+}
+body,
+html {
+  height: 100%;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: aliceblue;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+body {
+  background-image: url(./public/green.jpg);
+}
+html {
+  background-image: url(./public/image.png);
 }
+.content-table {
+  border-collapse: collapse;
+  margin: 15px 0;
+  font-size: 0.9em;
+  min-width: 960px;
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+  overflow: hidden;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
+.content-table thead tr {
+  background-color: rgb(31, 37, 213);
   color: white;
+  text-align: center;
+  font-weight: bold;
 }
 
-.App-link {
-  color: #61dafb;
+.content-table th,
+.content-table td {
+  padding: 15px 15px;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.content-table tbody tr {
+  border-bottom: 1px solid rgb(132, 87, 32);
+  background-color: rgb(248, 246, 246);
 }
+.row {
+  margin: 5px;
+}

src/App.js

@@ -1,23 +1,13 @@
-import logo from './logo.svg';
 import './App.css';
+import ProductsPage from './components/ProductPage';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+       <p style={{ fontSize: "80px", color: "white", fontFamily: "arial"}}>
+        Metro Sports
+      </p>
+      <ProductsPage />
     </div>
   );
 }

src/components/ProductPage.jsx

@@ -0,0 +1,41 @@
+import React, { useState} from "react";
+import jsondata from "../data.json";
+import SearchBar from "./Searchbar";
+import ProductTable from "./ProductTable";
+
+export default function ProductsPage() {
+    const [products, setProducts] = useState(jsondata);
+    const [filteredProducts, setfilteredProducts] = useState(products);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [inStockOnly, setInStockOnly] = useState(false);
+
+    const handleSearchChange = (searchTerm) => {
+        setSearchTerm(searchTerm);
+        filterProducts(searchTerm, inStockOnly);
+      };
+
+      const handleStockChange = (checked) => {
+        setInStockOnly(checked);
+        filterProducts(searchTerm, checked);
+      };
+
+      const filterProducts = (searchTerm, inStockOnly) => {
+        let filtered = products.filter((product) =>
+          product.name.toLowerCase().includes(searchTerm.toLowerCase())
+        );
+        if (inStockOnly) {
+          filtered = filtered.filter((product) => product.inStock);
+        }
+        setfilteredProducts(filtered);
+      };
+
+    return(
+        <div>
+      <SearchBar
+        onSearchChange={handleSearchChange}
+        onStockChange={handleStockChange}
+      />
+      <ProductTable products={filteredProducts} />
+    </div>
+    )
+};

src/components/ProductRow.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+export default function Row({ product }) {
+  const { name, price, inStock } = product;
+  const textColor = inStock ? "black" : "red";
+
+  return (
+    <tr>
+      <td style={{ color: textColor }}>{name}</td>
+      <td>{price}</td>
+    </tr>
+  );
+}

src/components/ProductTable.jsx

@@ -0,0 +1,22 @@
+import Row from "./ProductRow";
+
+
+export default function ProductTable({ products }) {
+    return (
+      <div className="product-table">
+        <table className="content-table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Price</th>
+            </tr>
+          </thead>
+          <tbody>
+            {products.map((product, index) => (
+              <Row key={index} product={product} />
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  }

src/components/Searchbar.jsx

@@ -0,0 +1,44 @@
+
+import React, { useState } from "react";
+
+export default function SearchBar({ onSearchChange, onStockChange }) {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [inStockOnly, setInStockOnly] = useState(false);
+
+  const handleSearchChange = (e) => {
+    setSearchTerm(e.target.value);
+    onSearchChange(e.target.value);
+  };
+
+  const handleStockChange = (e) => {
+    setInStockOnly(e.target.checked);
+    onStockChange(e.target.checked);
+  };
+
+  return (
+    <div className="search">
+      <p style={{ color: "white" }}>
+        <b>Search Bar</b>
+      </p>
+      <div>
+        <input
+          className="searchbar"
+          type="text"
+          placeholder="Search...."
+          value={searchTerm}
+          onChange={handleSearchChange}
+        />
+      </div>
+
+      <br></br>
+      <label style={{ color: "white" }}>
+        <input
+          type="checkbox"
+          checked={inStockOnly}
+          onChange={handleStockChange}
+        />
+        <b>Only show products in stock</b>
+      </label>
+    </div>
+  );
+}