diff --git a/package-lock.json b/package-lock.json index 9b67e2b..0007d8f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,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" } }, diff --git a/package.json b/package.json index f6f7903..3ae4ff4 100644 --- a/package.json +++ b/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": { diff --git a/src/App.css b/src/App.css index 74b5e05..949b7bd 100644 --- a/src/App.css +++ b/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; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 3784575..25c54d5 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,13 @@ -import logo from './logo.svg'; import './App.css'; +import ProductsPage from './components/ProductPage'; function App() { return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+

+ Metro Sports +

+
); } diff --git a/src/components/ProductPage.jsx b/src/components/ProductPage.jsx new file mode 100644 index 0000000..0693a5a --- /dev/null +++ b/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( +
+ + +
+ ) +}; diff --git a/src/components/ProductRow.jsx b/src/components/ProductRow.jsx new file mode 100644 index 0000000..f5ee608 --- /dev/null +++ b/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 ( + + {name} + {price} + + ); +} \ No newline at end of file diff --git a/src/components/ProductTable.jsx b/src/components/ProductTable.jsx new file mode 100644 index 0000000..3b4f51c --- /dev/null +++ b/src/components/ProductTable.jsx @@ -0,0 +1,22 @@ +import Row from "./ProductRow"; + + +export default function ProductTable({ products }) { + return ( +
+ + + + + + + + + {products.map((product, index) => ( + + ))} + +
NamePrice
+
+ ); + } \ No newline at end of file diff --git a/src/components/Searchbar.jsx b/src/components/Searchbar.jsx new file mode 100644 index 0000000..6f5a589 --- /dev/null +++ b/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 ( +
+

+ Search Bar +

+
+ +
+ +

+ +
+ ); +} \ No newline at end of file diff --git a/src/public/green-sports.jpg b/src/public/green-sports.jpg new file mode 100644 index 0000000..3adcbaa Binary files /dev/null and b/src/public/green-sports.jpg differ diff --git a/src/public/green.jpg b/src/public/green.jpg new file mode 100644 index 0000000..994a197 Binary files /dev/null and b/src/public/green.jpg differ diff --git a/src/public/image.png b/src/public/image.png new file mode 100644 index 0000000..db7e706 Binary files /dev/null and b/src/public/image.png differ