From 2d145b026cfdf54a63bef0b9d6324b6785390307 Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Fri, 14 Sep 2018 12:18:12 -0400 Subject: move finished folder --- .../frontend/components/CartItem.js | 53 ++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 finished-application/frontend/components/CartItem.js (limited to 'finished-application/frontend/components/CartItem.js') diff --git a/finished-application/frontend/components/CartItem.js b/finished-application/frontend/components/CartItem.js new file mode 100644 index 0000000..b0ce62e --- /dev/null +++ b/finished-application/frontend/components/CartItem.js @@ -0,0 +1,53 @@ +import React from 'react'; +import styled from 'styled-components'; +import PropTypes from 'prop-types'; +import formatMoney from '../lib/formatMoney'; +import RemoveFromCart from './RemoveFromCart'; + +const CartItemStyles = styled.li` + padding: 1rem 0; + border-bottom: 1px solid ${props => props.theme.lightgrey}; + display: grid; + align-items: center; + grid-template-columns: auto 1fr auto; + img { + margin-right: 10px; + } + h3, + p { + margin: 0; + } +`; + +const CartItem = ({ cartItem }) => { + // first check if that item exists + if (!cartItem.item) + return ( + +

This Item has been removed

+ +
+ ); + return ( + + {cartItem.item.title} +
+

{cartItem.item.title}

+

+ {formatMoney(cartItem.item.price * cartItem.quantity)} + {' - '} + + {cartItem.quantity} × {formatMoney(cartItem.item.price)} each + +

+
+ +
+ ); +}; + +CartItem.propTypes = { + cartItem: PropTypes.object.isRequired, +}; + +export default CartItem; -- cgit v1.3