From 642b6db2205e64e256f53b03c2415e9d47952b11 Mon Sep 17 00:00:00 2001
From: Leon Xu <dcwinfield362@gmail.com>
Date: Thu, 5 May 2022 21:44:50 -0700
Subject: [PATCH] doc: add contents similar to product component in
 checkoutProduct component

---
 src/Checkout/CheckoutProduct.js | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/Checkout/CheckoutProduct.js b/src/Checkout/CheckoutProduct.js
index b094e18..39c3703 100644
--- a/src/Checkout/CheckoutProduct.js
+++ b/src/Checkout/CheckoutProduct.js
@@ -1,8 +1,28 @@
 import React from "react";
 import "./CheckoutProduct.css";
 
-function CheckoutProduct() {
-  return <section className="checkoutProduct">CheckoutProduct</section>;
+function CheckoutProduct({ id, image, title, price, rating }) {
+  return (
+    <section className="checkoutProduct">
+      <img className="checkoutProduct__image" src={image} alt="product info" />
+
+      <article className="checkoutProduct__info">
+        <p className="checkoutProduct__title">{title}</p>
+        <p className="checkoutProduct__price">
+          <small>$</small>
+          <strong>{price}</strong>
+        </p>
+        <article className="checkoutProduct__rating">
+          {Array(rating)
+            .fill()
+            .map((_, i) => (
+              <p>🌟</p>
+            ))}
+        </article>
+        <button>Remove from Basket</button>
+      </article>
+    </section>
+  );
 }
 
 export default CheckoutProduct;