anisul-Islam · Gaffar507 · Feb 3, 2023 · Feb 3, 2023
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -11,13 +11,14 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap"
       rel="stylesheet"
     />
+    <link rel="stylesheet" href="style.css">
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -27,6 +28,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+
     <title>React App</title>
   </head>
   <body>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/public/style.css b/public/style.css
@@ -0,0 +1,105 @@
+:root {
+  --border-radius: 0.6rem;
+  --text-color: #fff;
+}
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  text-decoration: none;
+  outline: none;
+}
+
+body {
+  background-color: rgb(83, 83, 83);
+}
+html {
+  scroll-behavior: smooth;
+}
+.title {
+  text-align: center;
+  margin: 1rem 0;
+  color: white;
+  font-size: 2rem;
+}
+.products {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+  padding: 0.5rem;
+}
+.product {
+  background-color: #2c2c2c;
+  display: flex;
+  flex-direction: column;
+  height: 450px;
+}
+.product_img {
+  width: 100%;
+  height: 15rem;
+}
+.product_details {
+  /* padding: .5rem;
+    line-height: 1.5rem; */
+
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-weight: 100;
+}
+.product_title {
+  padding: 0.2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-weight: 100;
+  color: aliceblue;
+  font-family: 'Roboto', sans-serif;
+}
+.product_price {
+  color: orange;
+}
+.product_rating {
+  color: orange;
+}
+.product_description {
+  font-size: 0.8rem;
+  color: white;
+  font-family: fantasy;
+  overflow: auto;
+  line-height: normal;
+  font-weight: 100;
+}
+.btn {
+  border: none;
+  padding: 0.2rem;
+  border-radius: var(--border-radius);
+  transition: all 0.3s;
+  width: 5rem;
+  color: rgb(195, 154, 77);
+}
+
+.btn:hover {
+  background-color: orange;
+  color: black;
+}
+
+.title {
+  text-align: center;
+  margin: 1rem 0;
+  color: white;
+  font-size: 2rem;
+}
+
+@media (max-width: 768px) {
+  .products {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 600px) {
+  .products {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+}
diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,5 @@
+/* eslint-disable */
 import React from 'react';
-
 import Products from './components/Products';
 
 const products = [
@@ -83,13 +83,35 @@ const products = [
   }
 ];
 
+// const App = () => {
+//   return (
+//     <div>
+//       <h1 className="title">BD Store</h1>
+//       <div className="products">
+//         {products.map((item, index) => {
+//           const { image, title, price, description, rating } = item;
+//           return (
+//             <Products
+//               key={index}
+//               img={image}
+//               title={title}
+//               price={price}
+//               rating={rating.rate}
+//               desc={description}
+//             />
+//           );
+//         })}
+//       </div>
+//     </div>
+//   );
+// };
+// export default App;
+
 const App = () => {
   return (
     <div>
-      <h1 className="title">BD Store</h1>
-      <Products  />
+      <Products products={products} />
     </div>
   );
 };
-
 export default App;
diff --git a/src/components/Product.js b/src/components/Product.js
@@ -1,18 +1,19 @@
-/* eslint-disable react/prop-types */
+/* eslint-disable */
 import React from 'react';
 
-const Product = () => {
+const Product = (props) => {
+  const { image, title, price, description, rating, id } = props.product;
   return (
-      <article className="product">
-      <img src="" alt="" />
+    <div className="product">
+      <img src={image} alt={title} />
       <div className="product__details">
-        <h4 className="product__title">product title</h4>
-        <p>Price: $ product price</p>
-        <p>Rating: product rating rate/5</p>
-        <p className="product__desc">Description: product.description</p>
+        <h4 className="product__title">{title}</h4>
+        <p className="product_price">Price: ${price}</p>
+        <p className="product_rating">Rating: {rating.rate}/5</p>
+        <p className="product__desc">Description:{description}</p>
         <button className="product__btn btn">Add to cart</button>
       </div>
-    </article>
+    </div>
   );
 };
 

diff --git a/src/components/Products.js b/src/components/Products.js
@@ -1 +1,35 @@
-/* eslint-disable react/prop-types */
+/* eslint-disable */
+import React from 'react';
+import Product from './Product';
+
+// const products = (props) => {
+//   console.log(props.image);
+//   const { img, title, price, rating, desc } = props;
+//   return (
+//     <div>
+//       <div className="product">
+//         <img src={img} className="product_img"></img>
+//         <div className="product_details">
+//           <h3 className="product_title">{title}</h3>
+//           <p className="product_price">Price : ${price}</p>
+//           <p className="product_rating">Rating : {rating}/5</p>
+//           <p className="product_description">Description : {desc}</p>
+//           <button className="btn">Add to Cart</button>
+//         </div>
+//       </div>
+//     </div>
+//   );
+// };
+// export default products;
+
+const Products = (props) => {
+  const { products } = props;
+  const product = products.map((product) => <Product key={product.id} product={product} />);
+  return (
+    <div>
+      <h1 className="title">BD Store</h1>
+      <div className="products">{product}</div>
+    </div>
+  );
+};
+export default Products;
diff --git a/src/index.css b/src/index.css
@@ -16,7 +16,8 @@ html {
 }
 
 body {
-  background-color: #4c4c4c;
+  background-color: #5a5a5a;
+  width: 100%;
 }
 
 img {
@@ -29,7 +30,6 @@ img {
   padding: 0.2rem;
   border-radius: var(--border-radius);
   transition: all 0.3s;
-
   width: 5rem;
   color: rgb(195, 154, 77);
 }
@@ -45,7 +45,6 @@ img {
   color: white;
   font-size: 2rem;
 }
-
 .products {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));

diff --git a/src/index.js b/src/index.js
@@ -1,9 +1,9 @@
+/* eslint-disable */
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 
 import './index.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
-
 root.render(<App />);