Improving components

Author: svwoodhouse

Sections/Section 3/01-starting-setup/src/App.js

@@ -1,10 +1,35 @@
 import ExpenseItem from "./components/ExpenseItem";
 
 function App() {
+  const expenses = [
+    {
+      id: 'e1',
+      title: 'Toilet Paper',
+      amount: 94.12,
+      date: new Date(2020, 7, 14),
+    },
+    { id: 'e2', title: 'New TV', amount: 799.49, date: new Date(2021, 2, 12) },
+    {
+      id: 'e3',
+      title: 'Car Insurance',
+      amount: 294.67,
+      date: new Date(2021, 2, 28),
+    },
+    {
+      id: 'e4',
+      title: 'New Desk (Wooden)',
+      amount: 450,
+      date: new Date(2021, 5, 12),
+    },
+  ];
+
   return (
     <div>
       <h2>Let's get started!</h2>
-      <ExpenseItem></ExpenseItem>
+      <ExpenseItem title={expenses[0].title} amount={expenses[0].amount} date={expenses[0].date}></ExpenseItem>
+      <ExpenseItem title={expenses[1].title} amount={expenses[1].amount} date={expenses[1].date}></ExpenseItem>
+      <ExpenseItem title={expenses[2].title} amount={expenses[2].amount} date={expenses[2].date}></ExpenseItem>
+      <ExpenseItem title={expenses[3].title} amount={expenses[3].amount} date={expenses[3].date}></ExpenseItem>
     </div>
   );
 }

Sections/Section 3/01-starting-setup/src/components/ExpenseDate.css

@@ -0,0 +1,26 @@
+.expense-date {
+    display: flex;
+    flex-direction: column;
+    width: 5.5rem;
+    height: 5.5rem;
+    border: 1px solid #ececec;
+    background-color: #2a2a2a;
+    color: white;
+    border-radius: 12px;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .expense-date__month {
+    font-size: 0.75rem;
+    font-weight: bold;
+  }
+  
+  .expense-date__year {
+    font-size: 0.75rem;
+  }
+  
+  .expense-date__day {
+    font-size: 1.5rem;
+    font-weight: bold;
+  }

Sections/Section 3/01-starting-setup/src/components/ExpenseDate.js

@@ -0,0 +1,16 @@
+import './ExpenseDate.css'
+function ExpenseDate(props) {
+    const month = props.date.toLocaleString('en-US', {month: 'long'});
+    const day = props.date.toLocaleString('en-US', {day: '2-digit'});
+    const year = props.date.getFullYear();
+
+    return (
+    <div className="expense-date">
+        <div className="expense-date__month">{month}</div>
+        <div className="expense-date__day">{day}</div>
+        <div className="expense-date__year">{year}</div>
+    </div>
+    )
+}
+
+export default ExpenseDate

Sections/Section 3/01-starting-setup/src/components/ExpenseItem.js

@@ -1,16 +1,13 @@
 import './ExpenseItem.css'
+import ExpenseDate from './ExpenseDate'
 
-function ExpenseItem () {
-    const expenseDate = new Date(2021, 2, 28);
-    const expenseTitle = 'Car Insurance';
-    const expenseAmount = 294.67;
-
+function ExpenseItem (props) {
     return (
         <div className="expense-item">
-            <div>{expenseDate.toISOString()}</div>
+            <ExpenseDate date={props.date}/>
             <div className="expense-item__description">
-                <h2>{expenseTitle}</h2>
-                <div className="expense-item__price">${expenseAmount}</div>
+                <h2>{props.title}</h2>
+                <div className="expense-item__price">${props.amount}</div>
             </div>
         </div>
     )