diff --git a/db.json b/db.json index c64c11b..352f47e 100644 --- a/db.json +++ b/db.json @@ -2,24 +2,51 @@ "products": [ { "id": 1, - "name": "Sneakers Red & White 2025", - "brand": "NIKE", - "price": 38.0, - "imageUrl": "./src/assets/images/sneakers-image.jpg" + "name": "Breed Dry Dog Food", + "price": 100, + "imageUrl": "./src/assets/images/products/dog-food.svg" }, { "id": 2, - "name": "Sneakers Red & White 2025", - "brand": "NIKE", - "price": 38.0, - "imageUrl": "./src/assets/images/sneakers-image.jpg" + "name": "CANON EOS DSLR Camera", + "price": 360, + "imageUrl": "./src/assets/images/products/camera.svg" }, { "id": 3, - "name": "Sneakers Red & White 2025", - "brand": "NIKE", - "price": 38.0, - "imageUrl": "./src/assets/images/sneakers-image.jpg" + "name": "ASUS FHD Gaming Laptop", + "price": 700, + "imageUrl": "./src/assets/images/products/laptop.svg" + }, + { + "id": 4, + "name": "Curology Product Set ", + "price": 500, + "imageUrl": "./src/assets/images/products/curoset.svg" + }, + { + "id": 5, + "name": "Kids Electric Car", + "price": 960, + "imageUrl": "./src/assets/images/products/car.svg" + }, + { + "id": 6, + "name": "Jr. Zoom Soccer Cleats", + "price": 1160, + "imageUrl": "./src/assets/images/products/soccer.svg" + }, + { + "id": 7, + "name": "GP11 Shooter USB Gamepad", + "price": 660, + "imageUrl": "./src/assets/images/products/gamepad.svg" + }, + { + "id": 8, + "name": "Quilted Satin Jacket", + "price": 660, + "imageUrl": "./src/assets/images/products/jacket.svg" } ] } diff --git a/src/App.jsx b/src/App.jsx index 852cdfb..3277cde 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,10 +1,15 @@ import styles from './App.module.scss' +import React from 'react' +/* HEADER ICONS */ import CartIcon from './assets/icons/cart.svg' import UserIcon from './assets/icons/user.svg' import WishlistIcon from './assets/icons/wishlist.svg' import LoopIcon from './assets/icons/loop.svg' +/* PRODUCT CARD ICONS */ +import WishIcon from './assets/icons/wish.svg' + const Header = () => { return (
@@ -44,10 +49,56 @@ const Header = () => { ) } +const ProductCard = ({ name, price, imageUrl }) => { + return ( +
+
+ +
+ +
+
+
+

{name}

+
+ ${price} +
+
+
+ ) +} + +const ProductList = () => { + const [products, setProducts] = React.useState([]) + + const getProducts = async () => { + const response = await fetch('http://localhost:8000/products') + const data = await response.json() + setProducts(data) + } + + React.useEffect(() => { + getProducts() + }, []) + + return ( + + ) +} + const App = () => { return (
+
) } diff --git a/src/App.module.scss b/src/App.module.scss index c8c8a34..7e63122 100644 --- a/src/App.module.scss +++ b/src/App.module.scss @@ -1,7 +1,7 @@ @use './assets/styles/variables' as *; .container { - max-width: 1200px; + max-width: 1170px; margin: 0 auto; } @@ -62,3 +62,61 @@ } } } + +/* PRODUCT LIST */ +.list { + display: flex; + flex-wrap: wrap; + list-style: none; + padding-top: 60px; + gap: 30px; +} + +/* PRODUCT CARD */ + +.product { + display: flex; + flex-direction: column; + gap: 16px; + width: 270px; + + .image { + background-color: #f5f5f5; + display: flex; + align-items: center; + justify-content: center; + padding: 35px; + height: 250px; + position: relative; + + .buttons { + position: absolute; + top: 12px; + right: 12px; + + button { + display: flex; + outline: 0; + border: 0; + border-radius: 50%; + padding: 10px; + background-color: white; + + cursor: pointer; + } + } + } + + .content { + h4 { + font-size: 16px; + } + + .stats { + span { + font-size: 16px; + color: $primary-color; + } + } + } +} diff --git a/src/assets/icons/trash.svg b/src/assets/icons/trash.svg new file mode 100644 index 0000000..2c6f001 --- /dev/null +++ b/src/assets/icons/trash.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/wish.svg b/src/assets/icons/wish.svg new file mode 100644 index 0000000..001ccbf --- /dev/null +++ b/src/assets/icons/wish.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/products/camera.svg b/src/assets/images/products/camera.svg new file mode 100644 index 0000000..729188c --- /dev/null +++ b/src/assets/images/products/camera.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/products/car.svg b/src/assets/images/products/car.svg new file mode 100644 index 0000000..a12ad22 --- /dev/null +++ b/src/assets/images/products/car.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/products/curoset.svg b/src/assets/images/products/curoset.svg new file mode 100644 index 0000000..bfacd10 --- /dev/null +++ b/src/assets/images/products/curoset.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/products/dog-food.svg b/src/assets/images/products/dog-food.svg new file mode 100644 index 0000000..81aaf78 --- /dev/null +++ b/src/assets/images/products/dog-food.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/products/gamepad.svg b/src/assets/images/products/gamepad.svg new file mode 100644 index 0000000..54d90ed --- /dev/null +++ b/src/assets/images/products/gamepad.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/products/jacket.svg b/src/assets/images/products/jacket.svg new file mode 100644 index 0000000..e1b9d52 --- /dev/null +++ b/src/assets/images/products/jacket.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/products/laptop.svg b/src/assets/images/products/laptop.svg new file mode 100644 index 0000000..4401a4d --- /dev/null +++ b/src/assets/images/products/laptop.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/products/soccer.svg b/src/assets/images/products/soccer.svg new file mode 100644 index 0000000..a565a9a --- /dev/null +++ b/src/assets/images/products/soccer.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/images/sneakers-image.jpg b/src/assets/images/sneakers-image.jpg deleted file mode 100644 index d49264d..0000000 Binary files a/src/assets/images/sneakers-image.jpg and /dev/null differ