+
+ {/* State 1: Show the "Add Icon" button if there is NO icon */}
+
+
+ Add icon
+
+
+
+ {/* State 2: Show the giant Emoji if there IS an icon */}
+
+
+
+ {/* The Picker itself */}
+ event.stopPropagation()}
+ >
+
+
+
+
+
+
+ )
+}
diff --git a/src/src/ui/pages/Main/Main.tsx b/src/src/ui/pages/Main/Main.tsx
new file mode 100644
index 0000000..714f091
--- /dev/null
+++ b/src/src/ui/pages/Main/Main.tsx
@@ -0,0 +1,78 @@
+import React from 'react'
+import styled from 'styled-components'
+import Drawer from '../../surfaces/drawer/Drawer'
+import Navbar from '../../surfaces/navbar/Navbar'
+import { media } from '../../utils/media'
+import AccountsSection from './accounts/AccountsSection'
+import GoalsSection from './goals/GoalsSection'
+import TransactionsSection from './transactions/TransactionsSection'
+
+export default function Main() {
+ return (
+ {props.transaction.description}
+ + {tags ? tags.map((tag) =>{`${new Date( + props.transaction.dateTime, + ).toLocaleDateString()}`}
+ +{`${ + props.transaction.transactionType === 'Credit' + ? `$${props.transaction.amount}` + : `-$${props.transaction.amount}` + }`}
+See All
+
+
+ {/* State 1: Show the "Add Icon" button if there is NO icon */}
+
+
+ Add icon
+
+
+
+ {/* State 2: Show the giant Emoji if there IS an icon */}
+
+
+
+ {/* The Picker itself */}
+ event.stopPropagation()}
+ >
+
+
+
+
+