diff options
| -rw-r--r-- | thallium-frontend/src/components/CartStatus.tsx | 20 |
1 files changed, 19 insertions, 1 deletions
diff --git a/thallium-frontend/src/components/CartStatus.tsx b/thallium-frontend/src/components/CartStatus.tsx index 338e2cb..8fd54d9 100644 --- a/thallium-frontend/src/components/CartStatus.tsx +++ b/thallium-frontend/src/components/CartStatus.tsx @@ -1,12 +1,30 @@ import { useSelector } from "react-redux"; import { RootState } from "../store"; +import styled from "styled-components"; +import Button from "./forms/Button"; +import { useNavigate } from "react-router-dom"; + +const StatusHolder = styled.span` + margin-top: 1rem; + margin-bottom: 1rem; + +`; const CartStatus = () => { const cart = useSelector((state: RootState) => state.cart); const total = cart.cart.reduce((acc, item) => acc + item.quantity, 0); const price = cart.cart.reduce((acc, item) => acc + (parseFloat(item.estPrice) * item.quantity), 0); - return <p>You currently have {total} items in your cart, totalling ${price.toFixed(2)} USD</p>; + const navigate = useNavigate(); + + return <> + <StatusHolder>You currently have {total} item{total !== 1 ? "s" : null} in your cart, totalling ${price.toFixed(2)} USD</StatusHolder> + {total > 0 ? <Button onClick={() => { + navigate("/checkout"); + }}> + Checkout > + </Button> : null} + </>; }; export default CartStatus; |