adapting and shit

frontend/src/widgets/AccountSelect/index.tsx

@@ -0,0 +1,37 @@
+import { Link } from 'react-router-dom'
+import { message } from 'antd'
+import { useUserContext } from '../../contexts/UserContext'
+
+import './style.scss'
+
+type Props = {
+  selectProfile: (id: string) => void
+}
+
+export const AccountSelect = ({ selectProfile }: Props) => {
+  const { accounts } = useUserContext()
+
+  const handleSelect = (id: string) => {
+    selectProfile(id)
+    message.success(`Selected Account: ${id}`)
+  }
+
+  return (
+    <>
+      <h1>Select Account</h1>
+      <div className="account-select">
+        {accounts?.length
+          ? accounts.map((account) => (
+              <button
+                key={`account-${account.name}`}
+                onClick={() => handleSelect(account.id)}
+              >
+                {account.name}
+              </button>
+            ))
+          : ''}
+        <Link to="/account/new">Create New Budget!</Link>
+      </div>
+    </>
+  )
+}

frontend/src/widgets/AccountSelect/style.scss

@@ -0,0 +1,6 @@
+.account-select {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  width: 100%;
+}

frontend/src/widgets/FundBar/index.tsx

@@ -0,0 +1,40 @@
+import { Stack } from '../../types'
+import './style.scss'
+
+type Props = {
+  col: number
+  stack: Stack
+}
+
+export const FundBar = ({ stack, col }: Props) => {
+  const amount = 0
+
+  const max = stack.amount
+  const current = max - amount
+  const percent = Math.max(current / max, 0)
+  const hue = percent * 120
+
+  return (
+    <>
+      <div
+        className={`fundbar back col${col}`}
+        onClick={() => console.log(`adding transaction to => ${stack.name}`)}
+      ></div>
+      <div
+        className={`fundbar front col${col}`}
+        style={{
+          background: `hsl(${hue}, 100%, 50%)`,
+          height: `${percent * 40 + 10}vmin`,
+        }}
+      >
+        <h3>{stack.name}</h3>
+      </div>
+      <div
+        className={`fundbar totals col${col}`}
+        style={{ color: `hsl(0, 0%, ${Math.abs(1 - percent) * 100}%)` }}
+      >
+        ${Math.floor(current)} / ${max}
+      </div>
+    </>
+  )
+}

frontend/src/widgets/FundBar/style.scss

@@ -0,0 +1,33 @@
+.fundbar {
+  cursor: pointer;
+  border-radius: 1ch;
+  text-align: center;
+  margin: auto 2ch 0 2ch;
+
+  &.totals {
+    pointer-events: none;
+    margin-top: 2ch;
+  }
+
+  h3 {
+    margin: auto auto 0 auto;
+  }
+
+  &.front {
+    pointer-events: none;
+    transition: all 0.2s ease-out;
+    border: 2px solid #222a;
+    display: flex;
+    flex-direction: column;
+    padding: 2ch;
+    color: #333;
+    text-shadow: 2px 2px #2223, -1px -1px #fffa;
+  }
+
+  &.back {
+    background: #222;
+
+    border: 4px solid #3334;
+    height: 50vh;
+  }
+}