Created Card Wrapper component

Author: svwoodhouse

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

@@ -26,7 +26,7 @@ function App() {
   return (
     <div>
       <h2>Let's get started!</h2>
-      <Expenses {...expenses}></Expenses>
+      <Expenses {...expenses}/>
     </div>
   );
 }

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

@@ -0,0 +1,4 @@
+.card {
+    border-radius: 12px;
+    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
+}

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

@@ -0,0 +1,8 @@
+import './Card.css'
+function Card(props) {
+    const classes = 'card ' + props.className
+    
+    return <div className={classes}>{props.children}</div>
+}
+
+export default Card

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

@@ -2,10 +2,8 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
     padding: 0.5rem;
     margin: 1rem 0;
-    border-radius: 12px;
     background-color: #4b4b4b;
   }
 

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

@@ -1,15 +1,16 @@
 import './ExpenseItem.css'
 import ExpenseDate from './ExpenseDate'
+import Card from './Card'
 
 function ExpenseItem (props) {
     return (
-        <div className="expense-item">
+        <Card className="expense-item">
             <ExpenseDate date={props.date}/>
             <div className="expense-item__description">
                 <h2>{props.title}</h2>
                 <div className="expense-item__price">${props.amount}</div>
             </div>
-        </div>
+        </Card>
     )
 }
 

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

@@ -4,6 +4,4 @@
     margin: 2rem auto;
     width: 50rem;
     max-width: 95%;
-    border-radius: 12px;
-    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
   }

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

@@ -1,15 +1,16 @@
 import './Expenses.css'
 import ExpenseItem from './ExpenseItem'
+import Card from './Card'
 
 function Expenses (props) {
 
     return(
-        <div className='expenses'>
+        <Card className='expenses'>
             <ExpenseItem title={props[0].title} amount={props[0].amount} date={props[0].date}></ExpenseItem>
             <ExpenseItem title={props[1].title} amount={props[1].amount} date={props[1].date}></ExpenseItem>
             <ExpenseItem title={props[2].title} amount={props[2].amount} date={props[2].date}></ExpenseItem>
             <ExpenseItem title={props[3].title} amount={props[3].amount} date={props[3].date}></ExpenseItem>
-        </div>
+        </Card>
     )
 }