doc: add CurrencyFormatter to Subtotal component along with its style

This commit is contained in:
Leon Xu
2022-05-05 21:17:07 -07:00
parent 1c48a6260a
commit c379b1ec72
2 changed files with 40 additions and 1 deletions
+16
View File
@@ -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;
}
+24 -1
View File
@@ -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;