rivadar-internship

src/App.css

@@ -2,37 +2,38 @@
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+h1 {
+  color: #333;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+div {
+  margin-bottom: 20px;
 }
 
-.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;
+input {
+  margin-right: 10px;
 }
 
-.App-link {
-  color: #61dafb;
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 10px;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+th, td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
 }
+
+th {
+  background-color: #f2f2f2;
+}
+
+tr:nth-child(even) {
+  background-color: #f9f9f9;
+}
+
+tr:hover {
+  background-color: #ddd;
+}

src/App.js

@@ -1,25 +1,14 @@
-import logo from './logo.svg';
+import React from 'react';
 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>
   );
 }
 
-export default App;
+export default App;

src/components/ProductTable.js

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import ProductRow from './ProductsRow';
+
+const ProductTable = ({ products, searchTerm, inStockOnly }) => {
+  const filteredProducts = products
+    .filter((product) =>
+      product.name.toLowerCase().includes(searchTerm.toLowerCase())
+    )
+    .filter((product) => (inStockOnly ? product.inStock : true));
+
+  return (
+    <div>
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Price</th>
+          </tr>
+        </thead>
+        <tbody>
+          {filteredProducts.map((product, index) => (
+            <ProductRow key={index} product={product} />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default ProductTable;

src/components/ProductsPage.js

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import jsonData from './data.json';
+import SearchBar from './SearchBar';
+import ProductTable from './ProductTable';
+
+function ProductsPage() {
+  const [products, setProducts] = useState(jsonData);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [inStockOnly, setInStockOnly] = useState(false);
+
+  const handleSearchChange = (search) => {
+    setSearchTerm(search);
+  };
+
+  const handleStockChange = (stockStatus) => {
+    setInStockOnly(stockStatus);
+  };
+
+  return (
+    <div>
+      <h1>Root Store</h1>
+      <SearchBar
+        onSearchChange={handleSearchChange}
+        onStockChange={handleStockChange}
+        inStockOnly={inStockOnly}
+      />
+      <ProductTable
+        products={products}
+        searchTerm={searchTerm}
+        inStockOnly={inStockOnly}
+      />
+    </div>
+  );
+}
+
+export default ProductsPage;

src/components/ProductsRow.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const ProductRow = ({ product }) => {
+  const { name, category, price, inStock } = product;
+  const rowStyle = {
+    color: inStock ? 'black' : 'red',
+  };
+
+  return (
+    <tr style={rowStyle}>
+      <td>{name}</td>
+      <td>{price}</td>
+    </tr>
+  );
+};
+
+export default ProductRow;

src/components/SearchBar.js

@@ -0,0 +1,31 @@
+import React from 'react';
+
+const SearchBar = ({ onSearchChange, onStockChange, inStockOnly }) => {
+  const handleSearchChange = (event) => {
+    onSearchChange(event.target.value);
+  };
+
+  const handleStockChange = (event) => {
+    onStockChange(event.target.checked);
+  };
+
+  return (
+    <div>
+      <input
+        type="text"
+        placeholder="Search products..."
+        onChange={handleSearchChange}
+      />
+      <label>
+        <input
+          type="checkbox"
+          checked={inStockOnly}
+          onChange={handleStockChange}
+        />
+        Only show products in stock
+      </label>
+    </div>
+  );
+};
+
+export default SearchBar;