1 files changed, 39 insertions, 0 deletions
diff --git a/frontend/components/CartItem.js b/frontend/components/CartItem.js
new file mode 100644
index 0000000..83c948e
--- /dev/null
+++ b/frontend/components/CartItem.js
@@ -0,0 +1,39 @@
+import formatMoney from '../lib/formatMoney';
+import RemoveFromCart from './RemoveFromCart';
+import styled from 'styled-components';
+
+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 {
+    margin: 0;
+  }
+  p {
+    margin: 0;
+  }
+`;
+
+const CartItem = ({ cartItem }) => (
+  <CartItemStyles key={cartItem.id}>
+    <img width="100" src={cartItem.item.image} alt={cartItem.item.title} />
+    <div className="cart-item-details">
+      <h3>{cartItem.item.title}</h3>
+      <p>
+        {formatMoney(cartItem.quantity * cartItem.item.price)}
+        {' — '}
+        <em>
+          {cartItem.quantity} &times; {formatMoney(cartItem.item.price)} each
+        </em>
+      </p>
+    </div>
+    <RemoveFromCart id={cartItem.id} />
+  </CartItemStyles>
+);
+
+export default CartItem;