From deb2fee88a398dbee11c276401e1fbfcbac23c81 Mon Sep 17 00:00:00 2001
From: Ken Schaefer <ken@kenschae.com>
Date: Wed, 12 Apr 2023 11:40:10 -0500
Subject: [PATCH] added expenses component exercise

---
 react-complete-guide/src/App.js               | 21 ++-----------
 .../src/components/ExpenseDate.css            | 26 ++++++++++++++++
 .../src/components/ExpenseDate.js             | 17 ++++++++++
 .../src/components/ExpenseItem.js             |  3 +-
 .../src/components/Expenses.css               |  9 ++++++
 .../src/components/Expenses.js                | 31 +++++++++++++++++++
 6 files changed, 87 insertions(+), 20 deletions(-)
 create mode 100644 react-complete-guide/src/components/ExpenseDate.css
 create mode 100644 react-complete-guide/src/components/ExpenseDate.js
 create mode 100644 react-complete-guide/src/components/Expenses.css
 create mode 100644 react-complete-guide/src/components/Expenses.js

diff --git a/react-complete-guide/src/App.js b/react-complete-guide/src/App.js
index d28c16d..8fdecd7 100644
--- a/react-complete-guide/src/App.js
+++ b/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
-        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>
+      <Expenses items={expenses}/>
     </div>
   );
 }
diff --git a/react-complete-guide/src/components/ExpenseDate.css b/react-complete-guide/src/components/ExpenseDate.css
new file mode 100644
index 0000000..6bb08de
--- /dev/null
+++ b/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;
+  }
\ No newline at end of file
diff --git a/react-complete-guide/src/components/ExpenseDate.js b/react-complete-guide/src/components/ExpenseDate.js
new file mode 100644
index 0000000..92057fa
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/react-complete-guide/src/components/ExpenseItem.js b/react-complete-guide/src/components/ExpenseItem.js
index 73ceb25..9a304fb 100644
--- a/react-complete-guide/src/components/ExpenseItem.js
+++ b/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>
diff --git a/react-complete-guide/src/components/Expenses.css b/react-complete-guide/src/components/Expenses.css
new file mode 100644
index 0000000..f4f0186
--- /dev/null
+++ b/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);
+  }
\ No newline at end of file
diff --git a/react-complete-guide/src/components/Expenses.js b/react-complete-guide/src/components/Expenses.js
new file mode 100644
index 0000000..1be8440
--- /dev/null
+++ b/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;