diff --git a/src/App.js b/src/App.js index c6e5940..c78335c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,93 +1,95 @@ -import React from 'react'; +import React from "react"; -import Products from './components/Products'; +import Products from "./components/Products"; const products = [ { id: 1, - title: 'Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops', + title: "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops", price: 109.95, description: - 'Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday', + "Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday", category: "men's clothing", - image: 'https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg', + image: "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg", rating: { rate: 3.9, - count: 120 - } + count: 120, + }, }, { id: 2, - title: 'Mens Casual Premium Slim Fit T-Shirts ', + title: "Mens Casual Premium Slim Fit T-Shirts ", price: 22.3, description: - 'Slim-fitting style, contrast raglan long sleeve, three-button henley placket, light weight & soft fabric for breathable and comfortable wearing. And Solid stitched shirts with round neck made for durability and a great fit for casual fashion wear and diehard baseball fans. The Henley style round neckline includes a three-button placket.', + "Slim-fitting style, contrast raglan long sleeve, three-button henley placket, light weight & soft fabric for breathable and comfortable wearing. And Solid stitched shirts with round neck made for durability and a great fit for casual fashion wear and diehard baseball fans. The Henley style round neckline includes a three-button placket.", category: "men's clothing", - image: 'https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg', + image: + "https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg", rating: { rate: 4.1, - count: 259 - } + count: 259, + }, }, { id: 3, - title: 'Mens Cotton Jacket', + title: "Mens Cotton Jacket", price: 55.99, description: - 'great outerwear jackets for Spring/Autumn/Winter, suitable for many occasions, such as working, hiking, camping, mountain/rock climbing, cycling, traveling or other outdoors. Good gift choice for you or your family member. A warm hearted love to Father, husband or son in this thanksgiving or Christmas Day.', + "great outerwear jackets for Spring/Autumn/Winter, suitable for many occasions, such as working, hiking, camping, mountain/rock climbing, cycling, traveling or other outdoors. Good gift choice for you or your family member. A warm hearted love to Father, husband or son in this thanksgiving or Christmas Day.", category: "men's clothing", - image: 'https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg', + image: "https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg", rating: { rate: 4.7, - count: 500 - } + count: 500, + }, }, { id: 4, - title: 'Mens Casual Slim Fit', + title: "Mens Casual Slim Fit", price: 15.99, description: - 'The color could be slightly different between on the screen and in practice. / Please note that body builds vary by person, therefore, detailed size information should be reviewed below on the product description.', + "The color could be slightly different between on the screen and in practice. / Please note that body builds vary by person, therefore, detailed size information should be reviewed below on the product description.", category: "men's clothing", - image: 'https://fakestoreapi.com/img/71YXzeOuslL._AC_UY879_.jpg', + image: "https://fakestoreapi.com/img/71YXzeOuslL._AC_UY879_.jpg", rating: { rate: 2.1, - count: 430 - } + count: 430, + }, }, { id: 5, - title: "John Hardy Women's Legends Naga Gold & Silver Dragon Station Chain Bracelet", + title: + "John Hardy Women's Legends Naga Gold & Silver Dragon Station Chain Bracelet", price: 695, description: "From our Legends Collection, the Naga was inspired by the mythical water dragon that protects the ocean's pearl. Wear facing inward to be bestowed with love and abundance, or outward for protection.", - category: 'jewelery', - image: 'https://fakestoreapi.com/img/71pWzhdJNwL._AC_UL640_QL65_ML3_.jpg', + category: "jewelery", + image: "https://fakestoreapi.com/img/71pWzhdJNwL._AC_UL640_QL65_ML3_.jpg", rating: { rate: 4.6, - count: 400 - } + count: 400, + }, }, { id: 6, - title: 'Solid Gold Petite Micropave ', + title: "Solid Gold Petite Micropave ", price: 168, description: - 'Satisfaction Guaranteed. Return or exchange any order within 30 days.Designed and sold by Hafeez Center in the United States. Satisfaction Guaranteed. Return or exchange any order within 30 days.', - category: 'jewelery', - image: 'https://fakestoreapi.com/img/61sbMiUnoGL._AC_UL640_QL65_ML3_.jpg', + "Satisfaction Guaranteed. Return or exchange any order within 30 days.Designed and sold by Hafeez Center in the United States. Satisfaction Guaranteed. Return or exchange any order within 30 days.", + category: "jewelery", + image: "https://fakestoreapi.com/img/61sbMiUnoGL._AC_UL640_QL65_ML3_.jpg", rating: { rate: 3.9, - count: 70 - } - } + count: 70, + }, + }, ]; const App = () => { return (
-

BD Store

- +

BD Store

+
); }; diff --git a/src/components/Product.js b/src/components/Product.js index b497da4..b91a61e 100644 --- a/src/components/Product.js +++ b/src/components/Product.js @@ -1,16 +1,15 @@ /* eslint-disable react/prop-types */ -import React from 'react'; -const Product = () => { +const Product = ({ product }) => { return ( -
- +
+
-

product title

-

Price: $ product price

-

Rating: product rating rate/5

-

Description: product.description

- +

{product.title}

+

Price: {product.price}

+

Rating: {product.rating.rate}

+

{product.description}

+
); diff --git a/src/components/Products.js b/src/components/Products.js index 3da8fdd..695c626 100644 --- a/src/components/Products.js +++ b/src/components/Products.js @@ -1 +1,11 @@ /* eslint-disable react/prop-types */ +import Product from "./Product"; + +function Products({ products }) { + let productItem = products.map((product) => ( + + )); + return
{productItem}
; +} + +export default Products;