diff --git a/frontend/public/brontosaurus.svg b/frontend/public/brontosaurus.svg new file mode 100644 index 0000000..0ebf409 --- /dev/null +++ b/frontend/public/brontosaurus.svg @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/public/spinosaurus.svg b/frontend/public/spinosaurus.svg new file mode 100644 index 0000000..aaa585d --- /dev/null +++ b/frontend/public/spinosaurus.svg @@ -0,0 +1,118 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/App.js b/frontend/src/App.js index 37acfa1..2065bb1 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -17,6 +17,7 @@ import {ContactsIcon, CrossIcon, GearIcon, MenuIcon} from '@bitcoin-design/bitco import {ChartSquareBarIcon} from '@heroicons/react/solid'; import NewFamily from './routes/NewFamily'; import Invite from './routes/Invite'; +import Kid from './routes/Kid'; const Child = {}; @@ -70,6 +71,7 @@ function App() { } /> } /> + } /> ); diff --git a/frontend/src/index.css b/frontend/src/index.css index 4523ea7..db09a06 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -31,4 +31,8 @@ h1, h2 { .slots *:last-child { @apply border-b-0; +} + +.kid { + @apply bg-[#7350BC]; } \ No newline at end of file diff --git a/frontend/src/routes/Family.js b/frontend/src/routes/Family.js index ff8dbbf..e8ad9d0 100644 --- a/frontend/src/routes/Family.js +++ b/frontend/src/routes/Family.js @@ -21,7 +21,7 @@ const Family = () => { name: 'Jacob', photo: '/child.jpg', balance: '2,350', - id: 'jacob' + id: 'jacob/kid' }, { name: 'Gertrude', diff --git a/frontend/src/routes/Kid.js b/frontend/src/routes/Kid.js new file mode 100644 index 0000000..9c01e93 --- /dev/null +++ b/frontend/src/routes/Kid.js @@ -0,0 +1,128 @@ +import React from "react"; +import {Link, useParams} from "react-router-dom"; +import {ArrowDownIcon, ArrowUpIcon, BitcoinCircleIcon} from '@bitcoin-design/bitcoin-icons-react/filled'; +// unique account within family page +const Account = () => { + + + const {account} = useParams() + + const [accountInfo, setAccountInfo] = React.useState({ + name: '· · ·', + photo: '/father.jpg', + balance: '- - -', + id: 'placeholder' + }) + + const [transactions, setTransactions] = React.useState([ + { + counterparty: 'Parents', + memo: 'Savings', + date: '2022-06-01 14:55', + amount: 10000, + direction: 'receive' + }, + { + counterparty: 'Parents', + memo: 'Savings', + date: '2022-06-01 14:55', + amount: 10000, + direction: 'receive' + }, + { + counterparty: 'Parents', + memo: 'Savings', + date: '2022-06-01 14:55', + amount: 10000, + direction: 'receive' + }, + { + counterparty: 'Parents', + memo: 'Savings', + date: '2022-06-01 14:55', + amount: 10000, + direction: 'receive' + }, + { + counterparty: 'Parents', + memo: 'Savings', + date: '2022-06-01 14:55', + amount: 10000, + direction: 'receive' + }, + { + counterparty: 'Parents', + memo: 'Savings', + date: '2022-06-01 14:55', + amount: 10000, + direction: 'receive' + }, + { + counterparty: 'Parents', + memo: 'Savings', + date: '2022-06-01 14:55', + amount: 10000, + direction: 'receive' + }, + { + counterparty: 'Parents', + memo: 'Savings', + date: '2022-06-01 14:55', + amount: 10000, + direction: 'receive' + }, + ]) + + + return ( +
+
+

Jacob's Wallet

+ +
+

Your Balance

+

1000 sats

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

{tx.counterparty}

+

{tx.date}

+

{tx.memo}

+
+
+

{tx.amount}

+
+
+ ) + })} +
+ +
+ Brontosaurus +
+ +
+
+ ); +}; + +export default Account;