Budgets wip
This commit is contained in:
parent
5f7b3ef04d
commit
e0a73c5032
|
|
@ -1,40 +1,114 @@
|
||||||
import { useSignal } from 'https://esm.sh/v135/@preact/signals@1.2.2/X-ZS8q/dist/signals.js'
|
import { useSignal } from 'https://esm.sh/v135/@preact/signals@1.2.2/X-ZS8q/dist/signals.js'
|
||||||
import { JSX } from 'preact'
|
import { JSX } from 'preact'
|
||||||
|
|
||||||
// interface Budget {
|
import { Budget } from '../models.ts'
|
||||||
// name: string
|
|
||||||
// target: number
|
|
||||||
// buffer?: number
|
|
||||||
// }
|
|
||||||
|
|
||||||
interface IconButtonProps {
|
interface IconButtonProps {
|
||||||
active?: boolean
|
active?: boolean
|
||||||
text: string
|
text?: string
|
||||||
icon: string
|
icon?: JSX.Element
|
||||||
}
|
}
|
||||||
function IconButton(
|
function IconButton(
|
||||||
{ icon, text, active, ...props }:
|
{ icon, children, active, ...props }:
|
||||||
& IconButtonProps
|
& IconButtonProps
|
||||||
& JSX.HTMLAttributes<HTMLButtonElement>,
|
& JSX.HTMLAttributes<HTMLButtonElement>,
|
||||||
) {
|
) {
|
||||||
return (
|
return (
|
||||||
<button
|
<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' : '')}
|
(active ? ' text-primary' : '')}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<i>{icon}</i>
|
<span class='sm:mr-2'>{icon}</span>
|
||||||
<span>{text}</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>
|
</button>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Dashboard() {
|
export default function Dashboard() {
|
||||||
const activeNavItemIndex = useSignal(0)
|
const activeNavItemIndex = useSignal(0)
|
||||||
|
const budgets: Budget[] = [
|
||||||
|
{
|
||||||
|
name: 'Groceries',
|
||||||
|
target: 1000,
|
||||||
|
spent: 367.97,
|
||||||
|
},
|
||||||
|
]
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{ text: 'Some Text', icon: 'ICON' },
|
{
|
||||||
{ text: 'Some Text', icon: 'ICON' },
|
text: 'Some Text',
|
||||||
{ text: 'Some Text', icon: 'ICON' },
|
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 (
|
return (
|
||||||
|
|
@ -44,7 +118,7 @@ export default function Dashboard() {
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<nav class='w-full flex flex-1 sm:flex-col bg-mantle gap-1 p-1'>
|
<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
|
<IconButton
|
||||||
{...props}
|
{...props}
|
||||||
active={i == activeNavItemIndex.value}
|
active={i == activeNavItemIndex.value}
|
||||||
|
|
@ -52,7 +126,9 @@ export default function Dashboard() {
|
||||||
console.log({ ev, i })
|
console.log({ ev, i })
|
||||||
activeNavItemIndex.value = i
|
activeNavItemIndex.value = i
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
|
{text}
|
||||||
|
</IconButton>
|
||||||
))}
|
))}
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue