doc: add CurrencyFormatter to Subtotal component along with its style
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user