Merge pull request #2 from Jay-Topher/develop

Develop

Author: Jay-Topher

debug.log

@@ -0,0 +1 @@
+[1025/142900.327:WARNING:minidump_to_upload_parameters.cc(36)] duplicate key guid, discarding value e580bed1-34e2-41e2-8c81-7de2090ee2ea

package-lock.json

@@ -6,6 +6,8 @@
     "node-sass": "^4.12.0",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
+    "react-icons": "^3.7.0",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "3.2.0"
   },
   "scripts": {

package.json

@@ -1,16 +1,12 @@
 import React from 'react';
-import Header from './Components/Header/Header'
-import Carousel from './Components/Carousel/Carousel'
-import BridgeComponent from './Components/Bridge/BridgeComponent'
+import Homepage from './Views/Homepage/Homepage'
 
 import './App.css';
 
 function App() {
   return (
     <div className="App">
-      <Header />
-      <Carousel />
-      <BridgeComponent />
+      <Homepage />
 
     </div>
   );

src/App.js

@@ -13,7 +13,7 @@ function BottomHead() {
             </h1>
             <nav className='navlink'>
                 {navLinks.map(item => (
-                   <a href='/' className='mx-2 navlink--items'>{item}</a>
+                   <a href='/' className='mx-2 navlink--items' >{item}</a>
                 ))}
             </nav>
         </div>

src/Components/Header/BottomHead.js src/Commons/Header/BottomHead.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { MdStar } from "react-icons/md";
+import "./ProductCard.scss";
+import money from '../../Utils/Utils';
+
+export default function ProductCard({
+  productName,
+  ratings,
+  currentPrice,
+  oldPrice
+}) {
+  let stars = [];
+  for (let i = 0; i < 5; i++) {
+    if (i < ratings) {
+      stars.push(<MdStar className="goldStar" />);
+    } else {
+      stars.push(<MdStar className="greyStar" />);
+    }
+  }
+
+  return (
+    <div className="ProductCard">
+      <div className="product-image">
+        <img src={require('../../assets/img/apple_laptop.png')} alt="laptop" />
+      </div>
+      <hr />
+      <div className="ProductCard__body">
+        <h4>{productName}</h4>
+        <div className="stars">{stars}</div>
+        <div>
+          <span>{money(currentPrice)}</span>
+          <span className="crossed">{money(oldPrice)}</span>
+        </div>
+      </div>
+    </div>
+  );
+}

src/Components/Header/BottomHead.scss src/Commons/Header/BottomHead.scss

@@ -0,0 +1,46 @@
+.ProductCard {
+  border: 3px solid #f6f7f8;
+  width: 27rem;
+  height: 34.9rem;
+  border-radius: 3px;
+
+  .product-image {
+    width: 23.6rem;
+    height: 15.3rem;
+    margin: 0 auto;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    height: 18rem;
+
+    h4 {
+      font-size: 1.4rem;
+    }
+
+    div span {
+        font-size: 1.8rem;
+        padding: .5rem;
+
+        &.crossed {
+            color: grey;
+            text-decoration: line-through;
+        }
+    }
+  }
+}
+
+.goldStar {
+  color: gold;
+  font-size: 1.6rem;
+
+}
+
+.greyStar {
+  color: grey;
+  font-size: 1.6rem;
+
+}
+

src/Components/Header/Dropdown.js src/Commons/Header/Dropdown.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import './ProductHeader.scss';
+import {bestSeller} from '../../data/metadata.json'
+
+function ProductHeader() {
+
+    return (
+        <div className="ProductHeader">
+            <h3>best seller</h3>
+            <div>
+                {bestSeller.list.map((value, index) => (
+                    <a href="#" className="product-nav" key={index}>{value}</a>
+                ))}
+            </div>
+        </div>
+    )
+}
+
+export default ProductHeader;

src/Components/Header/Header.js src/Commons/Header/Header.js

@@ -0,0 +1,28 @@
+.ProductHeader {
+    margin-bottom: 2rem;
+
+    h3 {
+        text-transform: uppercase;
+        font-size: 3rem;
+        font-weight: 500;
+        margin-bottom: 2rem;
+    }
+    div {
+        display: flex;
+        justify-content: center;
+    }
+
+}
+
+.product-nav {
+    text-decoration: none;
+    font-size: 1.4rem;
+    margin: 1rem 2rem;
+    padding-bottom: .5rem;
+
+    &:hover, :active {
+        color: #33a0ff;
+        padding-bottom: .2rem;
+        border-bottom: 3px solid #33a0ff;
+    }
+}

src/Components/Header/Header.scss src/Commons/Header/Header.scss

@@ -0,0 +1,26 @@
+import React from "react";
+import ProductHeader from "./ProductHeader";
+import ProductCard from "./ProductCard";
+import { bestSeller } from "../../data/metadata.json";
+import "./Products.scss";
+
+const { data } = bestSeller;
+
+export default function Products() {
+  return (
+    <div className="container">
+      <ProductHeader />
+      <div className="Products">
+        {data.map(value => (
+          <ProductCard
+            productName={value.productName}
+            ratings={value.ratings}
+            currentPrice={value.currentPrice}
+            oldPrice={value.oldPrice}
+          />
+        ))}
+      </div>
+      <div className="more">Load More</div>
+    </div>
+  );
+}

src/Components/Header/ProfileText.js src/Commons/Header/ProfileText.js

@@ -0,0 +1,21 @@
+.Products {
+    max-width: 117rem;
+    height: 80rem;
+    margin: 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-content: space-evenly;
+    
+}
+
+.more {
+    text-transform: uppercase;
+    font-weight: 700;
+    color: #33a0ff;
+    padding-bottom: .5rem;
+    border-bottom: 3px solid #33a0ff;
+    margin-top: 2rem;
+    display: inline-block;
+    margin-bottom: 4rem;
+}