'done'

src/App.js

@@ -1,25 +1,16 @@
-import logo from './logo.svg';
-import './App.css';
+// App.jsx
+import "./App.css";
+import ProductsPage from "./componenets/ProductPage";
 
-function App() {
+import "./componenets/style.css";
+export default 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: "" }}>
+        SPORTS-STORE
+      </p>
+
+      <ProductsPage />
     </div>
   );
 }
-
-export default App;

src/componenets/ProductPage.jsx

@@ -0,0 +1,42 @@
+// src/components/ProductsPage.jsx
+import React, { useState } from "react";
+import SearchBar from "./SearchBar";
+import ProductTable from "./ProductTable";
+import data from "../data.json";
+
+export default function ProductsPage() {
+  const [products, setProducts] = useState(data);
+  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/componenets/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/componenets/ProductTable.jsx

@@ -0,0 +1,22 @@
+// src/components/ProductTable.jsx
+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/componenets/SearchBar.jsx

@@ -0,0 +1,44 @@
+// src/components/SearchBar.jsx
+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>
+  );
+}

src/componenets/style.css

@@ -0,0 +1,61 @@
+.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;
+}
+
+body {
+  background-image: url(green.jpg);
+}
+html {
+  background-image: url(green-sports.jpg);
+}
+.content-table {
+  border-collapse: collapse;
+  margin: 15px 0;
+  font-size: 0.9em;
+  min-width: 960px;
+
+  overflow: hidden;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+}
+
+.content-table thead tr {
+  background-color: rgb(132, 87, 32);
+  color: white;
+  text-align: center;
+  font-weight: bold;
+}
+
+.content-table th,
+.content-table td {
+  padding: 15px 15px;
+}
+
+.content-table tbody tr {
+  border-bottom: 1px solid rgb(132, 87, 32);
+  background-color: rgb(248, 246, 246);
+}
+.row {
+  margin: 5px;
+}