added expenses component exercise

react-complete-guide/src/App.js

@@ -1,4 +1,4 @@
-import ExpenseItem from "./components/ExpenseItem";
+import Expenses from "./components/Expenses";
 
 function App() {
   const expenses = [
@@ -26,24 +26,7 @@ function App() {
   return (
     <div>
       <h2>Let's get started!</h2>
-      <ExpenseItem
+      <Expenses items={expenses}/>
-        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>
   );
 }

react-complete-guide/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;
+  }

react-complete-guide/src/components/ExpenseDate.js

@@ -0,0 +1,17 @@
+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__year">{year}</div>
+            <div className="expense-date__day">{day}</div>
+        </div>
+    );
+}
+
+export default ExpenseDate;

react-complete-guide/src/components/ExpenseItem.js

@@ -1,3 +1,4 @@
+import ExpenseDate from './ExpenseDate';
 import './ExpenseItem.css';
 
 function ExpenseItem(props) {
@@ -7,7 +8,7 @@ function ExpenseItem(props) {
 
     return (
         <div className="expense-item">
-            <div>{props.date.toISOString()}</div>
+            <ExpenseDate date={props.date} />
             <div className="expense-item__description">
                 <h2>{props.title}</h2>
                 <div className="expense-item__price">${props.amount}</div>

react-complete-guide/src/components/Expenses.css

@@ -0,0 +1,9 @@
+.expenses {
+    padding: 1rem;
+    background-color: rgb(31, 31, 31);
+    margin: 2rem auto;
+    width: 50rem;
+    max-width: 95%;
+    border-radius: 12px;
+    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
+  }

react-complete-guide/src/components/Expenses.js

@@ -0,0 +1,31 @@
+import ExpenseItem from "./ExpenseItem";
+import "./Expenses.css";
+
+function Expenses(props) {
+  return (
+    <div className="expenses">
+      <ExpenseItem
+        title={props.items[0].title}
+        amount={props.items[0].amount}
+        date={props.items[0].date}
+      ></ExpenseItem>
+      <ExpenseItem
+        title={props.items[1].title}
+        amount={props.items[1].amount}
+        date={props.items[1].date}
+      ></ExpenseItem>
+      <ExpenseItem
+        title={props.items[2].title}
+        amount={props.items[2].amount}
+        date={props.items[2].date}
+      ></ExpenseItem>
+      <ExpenseItem
+        title={props.items[3].title}
+        amount={props.items[3].amount}
+        date={props.items[3].date}
+      ></ExpenseItem>
+    </div>
+  );
+}
+
+export default Expenses;