From b1600adec47a04f60e1da07d94a3ed3906ff5aee Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Thu, 14 Jun 2018 16:44:21 -0400
Subject: starter files

---
 .../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..6c6d575
--- /dev/null
+++ b/finished-application/frontend/components/CartItem.js
@@ -0,0 +1,53 @@
+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 {
+    margin: 0;
+  }
+  p {
+    margin: 0;
+  }
+`;
+
+const CartItem = ({ cartItem }) => {
+  if (!cartItem.item)
+    return (
+      <CartItemStyles key={cartItem.id}>
+        <p>Ack! That Item is gone!</p>
+        <RemoveFromCart id={cartItem.id} />
+      </CartItemStyles>
+    );
+  return (
+    <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>
+  );
+};
+
+CartItem.propTypes = {
+  cartItem: PropTypes.object.isRequired,
+};
+
+export default CartItem;
-- 
cgit v1.3