From 2d64c69ac59185f8f77bb9103ba95c50164f88c9 Mon Sep 17 00:00:00 2001 From: Liliia Hurko <130755897+lilyhurko@users.noreply.github.com> Date: Fri, 10 Oct 2025 13:49:48 +0200 Subject: [PATCH] first commit --- package-lock.json | 10 +++ package.json | 1 + src/App.css | 120 +++++++++++++++++++++++++++-------- src/App.js | 48 ++++++++------ src/components/AddProduct.js | 51 +++++++++++++++ src/components/Header.js | 9 +++ src/components/Product.js | 32 ++++++++++ src/components/Products.js | 13 ++++ 8 files changed, 239 insertions(+), 45 deletions(-) create mode 100644 src/components/AddProduct.js create mode 100644 src/components/Header.js create mode 100644 src/components/Product.js create mode 100644 src/components/Products.js diff --git a/package-lock.json b/package-lock.json index 498a3c3..3cce399 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^19.1.0", "react-dom": "^19.1.0", + "react-icons": "^5.5.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" } @@ -13902,6 +13903,15 @@ "integrity": "sha512-SN/U6Ytxf1QGkw/9ve5Y+NxBbZM6Ht95tuXNMKs8EJyFa/Vy/+Co3stop3KBHARfn/giv+Lj1uUnTfOJ3moFEQ==", "license": "MIT" }, + "node_modules/react-icons": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz", + "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package.json b/package.json index 609ad1a..ad6867d 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^19.1.0", "react-dom": "^19.1.0", + "react-icons": "^5.5.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, diff --git a/src/App.css b/src/App.css index 74b5e05..e152780 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,104 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap'); + +body { + display: flex; + justify-content: center; + background-color: #2f4f4f; + font-family: 'Poppins', sans-serif; +} + .App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; - font-size: calc(10px + 2vmin); + background-color: white; + width: 350px; + padding: 20px 0; + margin: 20px 0; + border-radius: 6px; +} + +.products { + width: 300px; +} + +.product { + display: flex; + align-items: center; + background-color: #CEB5A7; + padding: 0 15px; + margin-bottom: 10px; color: white; + border-radius: 6px; } -.App-link { - color: #61dafb; +.product-info { + display: flex; + justify-content: space-between; + flex: 0.7; } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.checked { + text-decoration: line-through; } + +.product-info .input-name { + display: flex; +} + +.product-info .input-name p { + margin-left: 10px; +} + +.product-icons { + display: flex; + justify-content: flex-end; + align-self: center; + flex: 0.3; +} + +.category { + margin-right: 10px; + font-size: 1.2em; +} + +.add-list { + display: flex; + flex-direction: column; + width: 300px; + margin-bottom: 20px; +} + +.input-div { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 10px; + max-height: 30px; +} + +.input-div label { + margin-right: 10px; +} + +.input-div select, +input { + padding: 5px; + background-color: white; + border: 1px solid gray; + border-radius: 6px; +} + +.btn { + color: white; + background-color: #A17C6B; + border: transparent; + border-radius: 3px; + padding: 5px 0; + border-radius: 6px; +} + +input[type=number] { + -moz-appearance: textfield; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 3784575..eb41be3 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,37 @@ -import logo from './logo.svg'; -import './App.css'; +import { useState } from "react" +import Header from './components/Header' +import Products from './components/Products' +import AddProduct from './components/AddProduct' +import './App.css' function App() { + const [products, setProducts] = useState([ + { id: 1, name: "mleko", category: "diary", quantity: 1 }, + { id: 2, name: "chleb", category: "bread", quantity: 1 }, + { id: 3, name: "jabłka", category: "fruit&vagetables", quantity: 2 } + ]) + + const deleteProduct = (id) => { + setProducts(products.filter((product) => product.id !== id)) + } + + const addProduct = (product) => { + const id = products.length + 1 + const newProduct = { id, ...product } + setProducts([...products, newProduct]) + } + return (
-
- logo -

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

- - Learn React - -
+
+ + {products.length > 0 ? ( + + ) : ( +

Brak produktów

+ )}
- ); + ) } -export default App; +export default App \ No newline at end of file diff --git a/src/components/AddProduct.js b/src/components/AddProduct.js new file mode 100644 index 0000000..694ce7c --- /dev/null +++ b/src/components/AddProduct.js @@ -0,0 +1,51 @@ +import { useState } from "react" + +const AddProduct = ({ onAdd }) => { + const [name, setName] = useState('') + const [category, setCategory] = useState('fruit&vagetables') + const [quantity, setQuantity] = useState(1) + + const add = (e) => { + e.preventDefault() + onAdd({ name, category, quantity }) + setName('') + setCategory('fruit&vagetables') + setQuantity(1) + } + + return ( +
+
+ + setName(e.target.value)} + required + /> +
+
+ + +
+
+ + setQuantity(e.target.value)} + /> +
+ +
+ ) +} + +export default AddProduct \ No newline at end of file diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 0000000..8d1231e --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,9 @@ +const Header = ({ title }) => { + return ( +
+

{title}

+
+ ) + } + + export default Header \ No newline at end of file diff --git a/src/components/Product.js b/src/components/Product.js new file mode 100644 index 0000000..153f942 --- /dev/null +++ b/src/components/Product.js @@ -0,0 +1,32 @@ +import { useState } from "react" +import { FiX } from "react-icons/fi" +import { GiMilkCarton, GiSlicedBread, GiShinyApple } from 'react-icons/gi' + +const Product = ({ product, onDelete }) => { + const [isChecked, setIsChecked] = useState(false) + + return ( +
+
+
+ setIsChecked(!isChecked)} + required + /> +

{product.name}

+
+

{product.quantity}

+
+
+ {product.category === "diary" && } + {product.category === "bread" && } + {product.category === "fruit&vagetables" && } + onDelete(product.id)}> +
+
+ ) +} + +export default Product \ No newline at end of file diff --git a/src/components/Products.js b/src/components/Products.js new file mode 100644 index 0000000..2b4c075 --- /dev/null +++ b/src/components/Products.js @@ -0,0 +1,13 @@ +import Product from './Product' + +const Products = ({ products, onDelete }) => { + return ( +
+ {products.map((product) => ( + + ))} +
+ ) +} + +export default Products \ No newline at end of file