make it better

src/components/Compare/index.css

@@ -0,0 +1,65 @@
+.compare table {
+  background-color: #fff;
+  border-radius: 5px;
+  overflow: hidden;
+  box-shadow: 0px 13px 21px -5px rgba(0, 0, 0, 0.05);
+  border: 1px solid #eee;
+  font-size: 18px;
+  table-layout: fixed;
+}
+
+.compare .thead-default th {
+  background-color: #fff;
+}
+
+.compare table tr > td,
+.compare table tr > th {
+  padding-top: 25px;
+  padding-bottom: 25px;
+  text-align: center;
+}
+
+.compare table thead th {
+  font-size: 20px;
+  color: #393c45;
+  font-weight: normal;
+}
+
+.compare table th[scope="row"] {
+  font-size: 20px;
+  color: #393c45;
+  font-weight: normal;
+  background-color: #f9f9f9;
+  border: 1px solid #eee;
+  text-align: left;
+  padding-left: 45px;
+}
+
+.compare table tr.condition {
+  color: #fff;
+  font-size: 20px;
+}
+
+.compare table tr.colors span {
+  height: 20px;
+  width: 20px;
+  background-color: #000;
+  display: inline-block;
+  margin-right: 5px;
+  border-radius: 100%;
+}
+
+.compare table td.red,
+.compare table tr.colors span.red {
+  background-color: #ff715b;
+}
+
+.compare table td.green,
+.compare table tr.colors span.green {
+  background-color: #48cfad;
+}
+
+.compare table td.blue,
+.compare table tr.colors span.blue {
+  background-color: #0197F6;
+}

src/components/Compare/index.js

@@ -0,0 +1,140 @@
+import React from 'react'
+import {Table} from 'reactstrap'
+import './index.css'
+
+const Compare = ({products}) =>
+  <div className="row compare">
+    <div className="col-12 mt-5 text-center">
+      <div className={(products.length < 2
+        ? 'hidden-xs-up'
+        : '')}>
+        <Table>
+          <thead className="thead-default">
+          <tr>
+            <th></th>
+            {products.map(product =>
+              <th key={product.id}>
+                {product.name}
+              </th>
+            )}
+          </tr>
+          </thead>
+          <tbody>
+            <tr className="price">
+              <th scope="row">Price</th>
+              {products.map(product =>
+                <td key={product.id} className="text-center">{product.price}</td>
+              )}
+            </tr>
+            <tr className="colors">
+              <th scope="row">Colors</th>
+              {products.map(product =>
+                <td key={product.id}>
+                {product.colors.map((color, index) =>
+                    <span key={index} className={color}></span>
+                )}
+                </td>
+              )}
+            </tr>
+            <tr className="condition">
+              <th scope="row">Condition</th>
+              {products.map(product =>
+                <td key={product.id} className={product.condition === "Used" ? "red" : "green"}>
+                  {product.condition}
+                </td>
+              )}
+            </tr>
+          </tbody>
+        </Table>
+      </div>
+    </div>
+  </div>;
+// const Compare = ({products}) =>
+//   <div className="row">
+//     <div className="col-12 mt-5">
+//       <h3 className={"text-center " + (products.length > 1 ? 'hidden-xs-up' : '')}>
+//         Select two or more products
+//       </h3>
+//
+//       <div className={(products.length < 2 ? 'hidden-xs-up' : '')}>
+//         <Table>
+//           <thead>
+//           <tr>
+//             <th></th>
+//             {products.map(product =>
+//               <td key={product.id}>
+//                 <img width="100%"
+//                      src={`${process.env.REACT_APP_API_URL}/v1/api/products/image/${product.img}`}
+//                      alt={product.name}/>
+//               </td>
+//             )}
+//           </tr>
+//           </thead>
+//           <tbody>
+//           <tr>
+//             <th>Name</th>
+//             {products.map(product =>
+//               <td key={product.id} className="text-center">{product.name}</td>
+//             )}
+//           </tr>
+//           <tr>
+//             <th>Categories</th>
+//             {products.map(product =>
+//               <td key={product.id}>
+//                 {product.categories.map((category, index) =>
+//                   <div className="text-center category" key={index}>{category}</div>
+//                 )}
+//               </td>
+//             )}
+//           </tr>
+//           <tr>
+//             <th>Balance Transfer Rates</th>
+//             {products.map(product =>
+//               <td key={product.id} className="text-center">
+//                 <div className="rate">{product.rates.balance.rate}% for up to</div>
+//                 <div className="period">{product.rates.balance.period} months</div>
+//                 <div className="fee">({product.rates.balance.fee}% handling fee)</div>
+//               </td>
+//             )}
+//           </tr>
+//           <tr>
+//             <th>Money Transfer Rates</th>
+//             {products.map(product =>
+//               <td key={product.id} className="text-center">
+//                 <div className="rate">{product.rates.money.rate}% for up to</div>
+//                 <div className="period">{product.rates.money.period} months</div>
+//                 <div className="fee">({product.rates.money.fee}% handling fee)</div>
+//               </td>
+//             )}
+//           </tr>
+//           <tr>
+//             <th>Card Purchases</th>
+//             {products.map(product =>
+//               <td key={product.id} className="text-center">
+//                 <div className="rate">{product.rates.purchases.rate}% for up to</div>
+//                 <div className="period">{product.rates.purchases.period} months</div>
+//                 <div className="fee">({product.rates.purchases.fee}% handling fee)</div>
+//               </td>
+//             )}
+//           </tr>
+//           <tr>
+//             <th>Additional Info</th>
+//             {products.map(product =>
+//               <td key={product.id} className="text-center">{product.info}</td>
+//             )}
+//           </tr>
+//           <tr className="text-center">
+//             <td></td>
+//             {products.map(product =>
+//               <td key={product.id}>
+//                 <Button color="primary">More info</Button>
+//               </td>
+//             )}
+//           </tr>
+//           </tbody>
+//         </Table>
+//       </div>
+//     </div>
+//   </div>;
+
+export default Compare;

src/components/Header/index.css

@@ -0,0 +1,3 @@
+header {
+  margin-top: 10vh;
+}

src/components/Header/index.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import './index.css'
+
+export default class Header extends React.Component {
+  render() {
+    return (
+      <div className="container">
+        <header>
+          <div className="row">
+            <div className="col-12 text-center">
+            </div>
+          </div>
+        </header>
+      </div>
+    );
+  }
+}

src/components/Product/index.css

@@ -0,0 +1,102 @@
+.product {
+  cursor: pointer;
+  position: relative;
+  padding-bottom: 100px;
+  border-radius: 5px;
+  overflow: hidden;
+  -webkit-transition: all 500ms ease-out;
+     -moz-transition: all 500ms ease-out;
+       -o-transition: all 500ms ease-out;
+          transition: all 500ms ease-out;
+}
+
+.product:hover {
+  box-shadow: 0px 13px 21px -5px rgba(0, 0, 0, 0.2);
+}
+
+.product img {
+  width: 100%;
+}
+
+.stats-container {
+  background: #fff;
+  padding: 25px 15px;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+}
+
+.stats-container .product_name {
+  font-size: 22px;
+  color: #393c45;
+}
+
+.stats-container p {
+  font-size: 16px;
+  color: #b1b1b3;
+  margin: 0;
+}
+
+.stats-container .product_price {
+  float: right;
+  color: #48cfad;
+  font-size: 22px;
+  font-weight: 600;
+}
+
+.image_overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #48cfad;
+  opacity: 0;
+  -webkit-transition: all 200ms ease-out;
+  -moz-transition: all 200ms ease-out;
+  -o-transition: all 200ms ease-out;
+  transition: all 200ms ease-out;
+}
+
+.product.compare .image_overlay,
+.product:hover .image_overlay {
+  opacity: 0.7;
+}
+
+.view_details {
+  position: absolute;
+  top: 112px;
+  left: 50%;
+  margin-left: -85px;
+  border: 2px solid #fff;
+  color: #fff;
+  font-size: 19px;
+  text-align: center;
+  text-transform: uppercase;
+  font-weight: 700;
+  padding: 10px 0;
+  width: 172px;
+  opacity: 0;
+  -webkit-transition: all 200ms ease-out;
+  -moz-transition: all 200ms ease-out;
+  -o-transition: all 200ms ease-out;
+  transition: all 200ms ease-out;
+}
+
+.view_details:hover {
+  background: #fff;
+  color: #48cfad;
+  cursor: pointer;
+}
+
+.product:hover .view_details {
+  opacity: 1;
+  width: 152px;
+  font-size: 15px;
+  margin-left: -75px;
+  top: 150px;
+  -webkit-transition: all 200ms ease-out;
+  -moz-transition: all 200ms ease-out;
+  -o-transition: all 200ms ease-out;
+  transition: all 200ms ease-out;
+}

src/components/Product/index.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import './index.css'
+
+// const Product = ({product, compare}) =>
+//     <div key={product.id} className="col-3 product-card">
+//       <Card inverse
+//             onClick={() => compare(product)}
+//             color={product.compare ? "success" : "primary"}
+//       >
+//         <CardBlock>
+//           <CardTitle>{product.name}</CardTitle>
+//         </CardBlock>
+//       </Card>
+//     </div>;
+
+const Product = ({product, compare}) =>
+    <div key={product.id} className="col-3">
+        <div className={"product " + (product.compare ? "compare" : "")} >
+            <img src={product.image} alt={product.name} />
+            <div className="image_overlay"></div>
+            <div className="view_details" onClick={() => compare(product)}>
+              {product.compare ? "Remove" : "Compare"}
+            </div>
+            <div className="stats">
+                <div className="stats-container">
+                    <span className="product_price">{product.price}</span>
+                    <span className="product_name">{product.name}</span>
+                    <p>Men's running shirt</p>
+                </div>
+            </div>
+        </div>
+    </div>;
+
+export default Product;

src/components/ProductList/index.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import Product from '../Product'
+
+const ProductList = ({products, compare}) =>
+  <div>
+    <div className="row mt-3">
+        {products.map(product =>
+          <Product key={product.id} product={product} compare={compare} />
+        )}
+    </div>
+  </div>;
+
+export default ProductList;