From e0a73c503292753b2329a3b8fcad5421c0680cff Mon Sep 17 00:00:00 2001
From: Daniel Flanagan <daniel@lyte.dev>
Date: Sat, 24 Aug 2024 08:10:43 -0500
Subject: [PATCH] Budgets wip

---
 islands/Dashboard.tsx | 108 +++++++++++++++++++++++++++++++++++-------
 models.ts             |  18 +++++++
 2 files changed, 110 insertions(+), 16 deletions(-)
 create mode 100644 models.ts

diff --git a/islands/Dashboard.tsx b/islands/Dashboard.tsx
index 25f9a93..8046d22 100644
--- a/islands/Dashboard.tsx
+++ b/islands/Dashboard.tsx
@@ -1,40 +1,114 @@
 import { useSignal } from 'https://esm.sh/v135/@preact/signals@1.2.2/X-ZS8q/dist/signals.js'
 import { JSX } from 'preact'
 
-// interface Budget {
-// 	name: string
-// 	target: number
-// 	buffer?: number
-// }
+import { Budget } from '../models.ts'
 
 interface IconButtonProps {
 	active?: boolean
-	text: string
-	icon: string
+	text?: string
+	icon?: JSX.Element
 }
 function IconButton(
-	{ icon, text, active, ...props }:
+	{ icon, children, active, ...props }:
 		& IconButtonProps
 		& JSX.HTMLAttributes<HTMLButtonElement>,
 ) {
 	return (
 		<button
-			class={'p-2 flex flex-col sm:flex-row flex-1 sm:flex-none bg-bg justify-center items-center sm:justify-start text-center sm:text-left rounded' +
+			class={'py-2 px-4 flex flex-col sm:flex-row flex-1 sm:flex-none bg-bg justify-center items-center sm:justify-start text-center sm:text-left rounded' +
 				(active ? ' text-primary' : '')}
 			{...props}
 		>
-			<i>{icon}</i>
-			<span>{text}</span>
+			<span class='sm:mr-2'>{icon}</span>
+			<span class=''>{children}</span>
+		</button>
+	)
+}
+
+function BudgetCard(
+	{ children, ...props }:
+		& { budget: Budget }
+		& JSX.HTMLAttributes<HTMLDivElement>,
+) {
+	return (
+		<button
+			class={'py-2 px-4 flex flex-col sm:flex-row flex-1 sm:flex-none bg-bg justify-center items-center sm:justify-start text-center sm:text-left rounded' +
+				(active ? ' text-primary' : '')}
+			{...props}
+		>
+			<span class='sm:mr-2'>{icon}</span>
+			<span class=''>{children}</span>
 		</button>
 	)
 }
 
 export default function Dashboard() {
 	const activeNavItemIndex = useSignal(0)
+	const budgets: Budget[] = [
+		{
+			name: 'Groceries',
+			target: 1000,
+			spent: 367.97,
+		},
+	]
 	const navItems = [
-		{ text: 'Some Text', icon: 'ICON' },
-		{ text: 'Some Text', icon: 'ICON' },
-		{ text: 'Some Text', icon: 'ICON' },
+		{
+			text: 'Some Text',
+			icon: (
+				<svg
+					xmlns='http://www.w3.org/2000/svg'
+					fill='none'
+					viewBox='0 0 24 24'
+					strokeWidth={1.5}
+					stroke='currentColor'
+					className='size-6'
+				>
+					<path
+						strokeLinecap='round'
+						strokeLinejoin='round'
+						d='M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5'
+					/>
+				</svg>
+			),
+		},
+		{
+			text: 'Some Text',
+			icon: (
+				<svg
+					xmlns='http://www.w3.org/2000/svg'
+					fill='none'
+					viewBox='0 0 24 24'
+					strokeWidth={1.5}
+					stroke='currentColor'
+					className='size-6'
+				>
+					<path
+						strokeLinecap='round'
+						strokeLinejoin='round'
+						d='m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5m8.25 3v6.75m0 0-3-3m3 3 3-3M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z'
+					/>
+				</svg>
+			),
+		},
+		{
+			text: 'Some Text',
+			icon: (
+				<svg
+					xmlns='http://www.w3.org/2000/svg'
+					fill='none'
+					viewBox='0 0 24 24'
+					strokeWidth={1.5}
+					stroke='currentColor'
+					className='size-6'
+				>
+					<path
+						strokeLinecap='round'
+						strokeLinejoin='round'
+						d='M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25'
+					/>
+				</svg>
+			),
+		},
 	]
 
 	return (
@@ -44,7 +118,7 @@ export default function Dashboard() {
 			</main>
 
 			<nav class='w-full flex flex-1 sm:flex-col bg-mantle gap-1 p-1'>
-				{navItems.map((props, i) => (
+				{navItems.map(({ text, ...props }, i) => (
 					<IconButton
 						{...props}
 						active={i == activeNavItemIndex.value}
@@ -52,7 +126,9 @@ export default function Dashboard() {
 							console.log({ ev, i })
 							activeNavItemIndex.value = i
 						}}
-					/>
+					>
+						{text}
+					</IconButton>
 				))}
 			</nav>
 		</div>
diff --git a/models.ts b/models.ts
new file mode 100644
index 0000000..a2b2a91
--- /dev/null
+++ b/models.ts
@@ -0,0 +1,18 @@
+export interface Budget {
+	name: string
+	target: number
+	buffer?: number
+	spent: number
+}
+
+export interface Bucket {
+	name: string
+	target: number
+	saved: number
+}
+
+export interface Transaction {
+	description: string
+	budget: string
+	amount: number
+}