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;