diff --git a/frontend/public/child.jpg b/frontend/public/child.jpg new file mode 100644 index 0000000..778be84 Binary files /dev/null and b/frontend/public/child.jpg differ diff --git a/frontend/public/father.jpg b/frontend/public/father.jpg new file mode 100644 index 0000000..67f0000 Binary files /dev/null and b/frontend/public/father.jpg differ diff --git a/frontend/public/grandmother.jpg b/frontend/public/grandmother.jpg new file mode 100644 index 0000000..02bfef6 Binary files /dev/null and b/frontend/public/grandmother.jpg differ diff --git a/frontend/public/mother.jpg b/frontend/public/mother.jpg new file mode 100644 index 0000000..be6075b Binary files /dev/null and b/frontend/public/mother.jpg differ diff --git a/frontend/src/App.js b/frontend/src/App.js index 85e5708..16bd086 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -23,28 +23,27 @@ const Child = {}; function App() { const [menuActive, setMenuActive] = React.useState(false) + const toggleMenu = () => { + setMenuActive(!menuActive) + } + return (
); diff --git a/frontend/src/index.css b/frontend/src/index.css index 6e36750..4523ea7 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -23,4 +23,12 @@ h1, h2 { .tile { @apply rounded-lg bg-fam-bg-dark p-8 drop-shadow-lg my-4 border border-fam-teal border-solid space-y-4 flex flex-col; +} + +.slots { + @apply rounded-lg bg-fam-bg-dark drop-shadow-lg my-4 border border-fam-teal border-solid flex flex-col; +} + +.slots *:last-child { + @apply border-b-0; } \ No newline at end of file diff --git a/frontend/src/routes/Account.js b/frontend/src/routes/Account.js index 38eea52..e98feaa 100644 --- a/frontend/src/routes/Account.js +++ b/frontend/src/routes/Account.js @@ -1,15 +1,166 @@ import React from "react"; -import { useParams } from "react-router-dom"; +import {Link, useParams} from "react-router-dom"; +import {ArrowDownIcon, ArrowUpIcon} from '@bitcoin-design/bitcoin-icons-react/filled'; // unique account within family page const Account = () => { - const { family, account } = useParams(); + const [family, setFamily] = React.useState([ + { + name: 'Jerry', + photo: '/father.jpg', + balance: '1,000,000', + id: 'jerry' + }, + { + name: 'Jennifer', + photo: '/mother.jpg', + balance: '999,000', + id: 'jennifer' + }, + { + name: 'Jacob', + photo: '/child.jpg', + balance: '2,350', + id: 'jacob' + }, + { + name: 'Gertrude', + photo: '/grandmother.jpg', + balance: '90,000,023', + id: 'gertrude' + } + ]) + + const {account} = useParams() + + const [accountInfo, setAccountInfo] = React.useState({ + name: '· · ·', + photo: '/father.jpg', + balance: '- - -', + id: 'placeholder' + }) + + const [transactions, setTransactions] = React.useState([ + { + counterparty: 'Merchant', + memo: 'Purchase at store', + date: '2022-06-01 14:55', + amount: 20000, + direction: 'send' + }, + { + counterparty: 'Merchant', + memo: 'Refund at store', + date: '2022-06-01 14:55', + amount: 30000, + direction: 'receive' + }, + { + counterparty: 'Merchant', + memo: 'Purchase at store', + date: '2022-06-01 14:55', + amount: 10000, + direction: 'send' + }, + { + counterparty: 'Merchant', + memo: 'Purchase at store', + date: '2022-06-01 14:55', + amount: 20000, + direction: 'send' + }, + { + counterparty: 'Merchant', + memo: 'Refund at store', + date: '2022-06-01 14:55', + amount: 30000, + direction: 'receive' + }, + { + counterparty: 'Merchant', + memo: 'Purchase at store', + date: '2022-06-01 14:55', + amount: 10000, + direction: 'send' + }, + { + counterparty: 'Merchant', + memo: 'Purchase at store', + date: '2022-06-01 14:55', + amount: 20000, + direction: 'send' + }, + { + counterparty: 'Merchant', + memo: 'Refund at store', + date: '2022-06-01 14:55', + amount: 30000, + direction: 'receive' + }, + { + counterparty: 'Merchant', + memo: 'Purchase at store', + date: '2022-06-01 14:55', + amount: 10000, + direction: 'send' + }, + ]) + + React.useEffect(()=> { + + let currentAccountIndex = family.findIndex((element) => element.id === account) + console.log(currentAccountIndex) + console.log(family[currentAccountIndex]) + + setAccountInfo(family[currentAccountIndex]) + + }) return ( -
-

Account Page

-

- Welcome {account} from {family} family! -

+
+
+
+

Account Activity

+ +
+
+ {accountInfo.name} +
+

{accountInfo.name}

+

{accountInfo.balance} sats

+
+
+ + {transactions.map((tx, index)=>{ + return( +
+
+ + + {tx.direction === 'send' ? + + + + : + + + + } +
+
+

{tx.counterparty}

+

{tx.date}

+

{tx.memo}

+
+
+

{tx.amount}

+
+
+ ) + })} +
+ + +
); }; diff --git a/frontend/src/routes/Family.js b/frontend/src/routes/Family.js index ab548ef..ff8dbbf 100644 --- a/frontend/src/routes/Family.js +++ b/frontend/src/routes/Family.js @@ -1,10 +1,58 @@ -import { Outlet } from "react-router-dom"; +import {Link, Outlet} from "react-router-dom"; +import Button from '../components/Button'; +import {PlusIcon} from '@heroicons/react/solid'; +import React from 'react'; //generic Family Page const Family = () => { + const [family, setFamily] = React.useState([ + { + name: 'Jerry', + photo: '/father.jpg', + balance: '1,000,000', + id: 'jerry' + }, + { + name: 'Jennifer', + photo: '/mother.jpg', + balance: '999,000', + id: 'jennifer' + }, + { + name: 'Jacob', + photo: '/child.jpg', + balance: '2,350', + id: 'jacob' + }, + { + name: 'Gertrude', + photo: '/grandmother.jpg', + balance: '90,000,023', + id: 'gertrude' + } + ]) + return ( -
-

Private Family Page

- +
+
+
+

Malone Family

+ +
+ {family.map((member, index) => { + return ( + + {member.name} +
+

{member.name}

+

{member.balance} sats

+
+ + ) + })} +
+ + +
); };