done

src/App.css

@@ -1,38 +1,39 @@
 .App {
   text-align: center;
+  box-sizing: border-box;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.search-bar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 1rem;
+  margin-bottom: 50px
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.search-bar p {
+  margin: 0;
+  font-size: 1.3rem
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+#search {
+  width: 800px;
+  padding: 10px;
+  font-size: 1rem
 }
 
-.App-link {
-  color: #61dafb;
+.checkBox-container {
+  margin-top: 10px
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.product-table {
+  /* display: flex;
+  align-items: center;
+  flex-direction: column; */
+  margin: auto;
+  width: 800px
 }
+
+thead {
+  background-color: gray;
+}

src/App.js

@@ -1,23 +1,10 @@
-import logo from './logo.svg';
 import './App.css';
+import ProductsPage from './Components/ProductsPage';
 
 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>
+      <ProductsPage />
     </div>
   );
 }

src/Components/ProductTable.js

@@ -0,0 +1,26 @@
+import React from "react";
+
+function ProductTable(props) {
+
+    return (
+        <table className="product-table">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Price</th>
+                </tr>
+            </thead>
+            <tbody>
+                {props.products.map((product) => {
+                    return (
+                        <tr key={product.id}>
+                            <td>{product.name}</td>
+                            <td>{product.price}</td>
+                        </tr>
+                    )
+                })}
+            </tbody>
+        </table>
+    )
+}
+export default ProductTable;

src/Components/ProductsPage.js

@@ -0,0 +1,36 @@
+
+import { useState } from 'react';
+import jsonData from '../data.json';
+import SearchBar from './SearchBar';
+import ProductTable from './ProductTable';
+
+function ProductsPage() {
+
+    const [searchQuery, setSearchQuery] = useState('');
+    const [onlyInStock, setOnlyInStock] = useState(false);
+
+    const handleSearchChange = (query) => {
+        setSearchQuery(query);
+    };
+
+    const handleInStockChange = (event) => {
+        setOnlyInStock(event.target.checked);
+    };
+
+    const filteredProducts = jsonData.filter((product) => {
+        const matchesSearchQuery = product.name.toLowerCase().includes(searchQuery.toLowerCase());
+        const matchesStockFilter = !onlyInStock || product.inStock;
+        return matchesSearchQuery && matchesStockFilter;
+    });
+
+
+    return (
+        <div>
+            <h1>Root Store</h1>
+            <SearchBar searchQuery={searchQuery} onSearchChange={handleSearchChange} checked={onlyInStock} onCheckChange={handleInStockChange} />
+            <ProductTable products={filteredProducts} />
+        </div>
+    )
+
+};
+export default ProductsPage;

src/Components/SearchBar.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+function SearchBar(props) {
+
+    return (
+        <div className="search-bar">
+            <p>Search</p>
+            <input type="text" placeholder="search for products" id="search" value={props.searchQuery} onChange={(e) => props.onSearchChange(e.target.value)} />
+            <div className="checkBox-container">
+                <input type="checkbox" id="check-box" checked={props.checked} onChange={props.onCheckChange} />
+                <span>Only show products available</span>
+            </div>
+        </div>
+    )
+}
+
+export default SearchBar;