diff --git a/src/App.js b/src/App.js index 3784575..93c9bd0 100644 --- a/src/App.js +++ b/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 (
-
- logo -

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

- - Learn React - -
+

+ SPORTS-STORE +

+ +
); } - -export default App; diff --git a/src/componenets/ProductPage.jsx b/src/componenets/ProductPage.jsx new file mode 100644 index 0000000..c3d74a6 --- /dev/null +++ b/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 ( +
+ + +
+ ); +} diff --git a/src/componenets/ProductRow.jsx b/src/componenets/ProductRow.jsx new file mode 100644 index 0000000..dfcb8c1 --- /dev/null +++ b/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 ( + + {name} + {price} + + ); +} diff --git a/src/componenets/ProductTable.jsx b/src/componenets/ProductTable.jsx new file mode 100644 index 0000000..6bc824d --- /dev/null +++ b/src/componenets/ProductTable.jsx @@ -0,0 +1,22 @@ +// src/components/ProductTable.jsx +import Row from "./ProductRow"; + +export default function ProductTable({ products }) { + return ( +
+ + + + + + + + + {products.map((product, index) => ( + + ))} + +
NamePrice
+
+ ); +} diff --git a/src/componenets/SearchBar.jsx b/src/componenets/SearchBar.jsx new file mode 100644 index 0000000..59af520 --- /dev/null +++ b/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 ( +
+

+ Search Bar +

+
+ +
+ +

+ +
+ ); +} diff --git a/src/componenets/green-sports.jpg b/src/componenets/green-sports.jpg new file mode 100644 index 0000000..fbc95e8 Binary files /dev/null and b/src/componenets/green-sports.jpg differ diff --git a/src/componenets/green.jpg b/src/componenets/green.jpg new file mode 100644 index 0000000..0917092 Binary files /dev/null and b/src/componenets/green.jpg differ diff --git a/src/componenets/sports-bg.jpg b/src/componenets/sports-bg.jpg new file mode 100644 index 0000000..c0c067c Binary files /dev/null and b/src/componenets/sports-bg.jpg differ diff --git a/src/componenets/style.css b/src/componenets/style.css new file mode 100644 index 0000000..71a8135 --- /dev/null +++ b/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; +} diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file