From c379b1ec72d4f366c06d87309cd7a537ee8db6db Mon Sep 17 00:00:00 2001
From: Leon Xu <dcwinfield362@gmail.com>
Date: Thu, 5 May 2022 21:17:07 -0700
Subject: [PATCH] doc: add CurrencyFormatter to Subtotal component along with
 its style

---
 src/Checkout/Subtotal.css | 16 ++++++++++++++++
 src/Checkout/Subtotal.js  | 25 ++++++++++++++++++++++++-
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/Checkout/Subtotal.css b/src/Checkout/Subtotal.css
index e69de29..ef0938e 100644
--- a/src/Checkout/Subtotal.css
+++ b/src/Checkout/Subtotal.css
@@ -0,0 +1,16 @@
+.subtotal {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 300px;
+  height: 100px;
+  padding: 20px;
+  background-color: #f3f3f3;
+  border: 1px solid #dddddd;
+  border-radius: 3px;
+}
+
+.subtotal__gift {
+  display: flex;
+  align-items: center;
+}
diff --git a/src/Checkout/Subtotal.js b/src/Checkout/Subtotal.js
index f2e94ce..5def393 100644
--- a/src/Checkout/Subtotal.js
+++ b/src/Checkout/Subtotal.js
@@ -1,8 +1,31 @@
 import React from "react";
+import CurrencyFormat from "react-currency-format";
 import "./Subtotal.css";
 
 function Subtotal() {
-  return <section className="subtotal">Subtotal</section>;
+  return (
+    <section className="subtotal">
+      <CurrencyFormat
+        renderText={(value) => (
+          <>
+            <p>
+              Subtotal (0 items): <strong>0</strong>
+            </p>
+            <small className="subtotal__gift">
+              <input type="checkbox" /> This order contains a gift
+            </small>
+          </>
+        )}
+        decimalScale={2}
+        value={0}
+        displayType={"text"}
+        thousandSeparator={true}
+        prefix={"$"}
+      />
+
+      <button>Proceed to Checkout</button>
+    </section>
+  );
 }
 
 export default Subtotal;