diff options
| author |  Joe Banks <[email protected]> | 2024-09-12 02:30:30 +0100 |
|---|---|---|
| committer | Joe Banks <[email protected]> | 2024-09-12 02:30:30 +0100 |
| commit | e994279d202a5512614b8dc8c58fa61c89658ab1 (patch) | |
| tree | c1586c07be4103f5b608e9c587c85c681c3a7d91 | |
| parent | ESLint fixes (diff) | |
Add card wrapper around cart status on store page
| -rw-r--r-- | thallium-frontend/src/components/CartStatus.tsx | 26 |
1 files changed, 19 insertions, 7 deletions
diff --git a/thallium-frontend/src/components/CartStatus.tsx b/thallium-frontend/src/components/CartStatus.tsx index cdb35f3..02c7661 100644 --- a/thallium-frontend/src/components/CartStatus.tsx +++ b/thallium-frontend/src/components/CartStatus.tsx @@ -7,7 +7,7 @@ import { useNavigate } from "react-router-dom"; import { useVisible } from "../utils/hooks"; import Card from "./Card"; -const StatusHolder = styled.span` +const StatusHolder = styled.div` margin-top: 1rem; margin-bottom: 1rem; `; @@ -42,6 +42,10 @@ font-weight: bold; font-size: 1.1em; `; +const CartStatusContainer = styled.div` +text-align: center; +`; + const CartStatus = () => { const cart = useSelector((state: RootState) => state.cart); const total = cart.cart.reduce((acc, item) => acc + item.quantity, 0); @@ -58,18 +62,26 @@ const CartStatus = () => { navigate("/checkout"); }; - const statusDetails = <>You currently have <DetailsSpan>{total}</DetailsSpan> item{ total !== 1 ? "s" : null } in your cart, totalling < DetailsSpan > ${ price.toFixed(2) } USD</DetailsSpan></>; + const statusDetails = ( + <> + You currently have <DetailsSpan>{total}</DetailsSpan> item{ total !== 1 ? "s" : null } in your cart, totalling <DetailsSpan>${ price.toFixed(2) } USD</DetailsSpan> + </> + ); return <> - <StatusHolder>{statusDetails}</StatusHolder> + <Card title="Your Cart"> + <CartStatusContainer> + <StatusHolder>{statusDetails}</StatusHolder> + <Button ref={staticButtonRef} disabled={total === 0} onClick={buttonCallback}> + {checkoutMsg} + </Button> + </CartStatusContainer> + </Card> <FloatingStatusHolder $visible={!buttonVisible}> - <Card title="Your cart"> + <Card title="Your Cart"> {statusDetails} </Card> </FloatingStatusHolder> - <Button ref={staticButtonRef} disabled={total === 0} onClick={buttonCallback}> - {checkoutMsg} - </Button> <FloatingButton $visible={!buttonVisible && total > 0} onClick={buttonCallback}> {checkoutMsg} </FloatingButton> |