Installed react modal image to aid display images on the cart

package.json

@@ -14,6 +14,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-image-file-resizer": "^0.4.8",
+    "react-modal-image": "^2.6.0",
     "react-redux": "^8.0.5",
     "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.6.2",

src/components/cards/ProductCardInCheckout.js

@@ -0,0 +1,31 @@
+import React from "react";
+import ModalImage from 'react-modal-image';
+import laptop from '../../images/laptop.png'
+
+const ProductCardInCheckout = ({p})=> {
+    return(
+        <tbody>
+            <tr>
+                <td>
+                    <div style={{width: '100px', height: 'auto'}}>
+                        {p.images.length ? (
+                            <ModalImage small={p.images[0].url} large={p.images[0].url}/>
+                        ):(
+                            <ModalImage small={laptop} large={laptop}/>
+                        )}
+                    </div>
+                </td>
+                <td>{p.title}</td>
+                <td>Ksh {p.price}</td>
+                <td>{p.brand}</td>
+                <td>{p.color}</td>
+                <td>{p.count}</td>
+                <td>Shipping Icon</td>
+                <td>Remove icon</td>
+            </tr>
+        </tbody>
+    )
+
+}
+
+export default ProductCardInCheckout

src/pages/Cart.js

@@ -1,6 +1,7 @@
 import React from "react";
 import {useSelector, useDispatch} from 'react-redux'
 import { Link, useNavigate } from "react-router-dom";
+import ProductCardInCheckout from "../components/cards/ProductCardInCheckout";
 
 const Cart =()=>{
     const user = useSelector((state)=> ({...state}));
@@ -9,6 +10,24 @@ const Cart =()=>{
     const dispatch = useDispatch();
     const navigate = useNavigate();
 
+    const showCartItems=()=> {
+  return (      <table className="table table-borded">
+            <thead className="thead-light">
+                <tr>
+                    <th scope="col">Image</th>
+                    <th scope="col">Title</th>
+                    <th scope="col">Price</th>
+                    <th scope="col">Brand</th>
+                    <th scope="col">Color</th>
+                    <th scope="col">Count</th>
+                    <th scope="col">Shipping</th>
+                    <th scope="col">Remove</th>
+                </tr>  
+            </thead>
+            {cart.map((p)=>(<ProductCardInCheckout key={p._id} p={p}/>))}
+        </table>);
+    }
+
     const getTotal=()=> {
         return cart.reduce((currentValue, nextValue)=>{
             return currentValue + nextValue.count * nextValue.price
@@ -38,7 +57,7 @@ const Cart =()=>{
                     &nbsp;<Link to="/shop">Continue Shopping</Link>
                 </p>
             ):(
-                "Show products"
+                showCartItems()
             )}
         </div>
         <div className="col-md-4">