61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
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
|
|
// }
|
|
|
|
interface IconButtonProps {
|
|
active?: boolean
|
|
text: string
|
|
icon: string
|
|
}
|
|
function IconButton(
|
|
{ icon, text, 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' +
|
|
(active ? ' text-primary' : '')}
|
|
{...props}
|
|
>
|
|
<i>{icon}</i>
|
|
<span>{text}</span>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export default function Dashboard() {
|
|
const activeNavItemIndex = useSignal(0)
|
|
const navItems = [
|
|
{ text: 'Some Text', icon: 'ICON' },
|
|
{ text: 'Some Text', icon: 'ICON' },
|
|
{ text: 'Some Text', icon: 'ICON' },
|
|
]
|
|
|
|
return (
|
|
<div class='grid grid-rows-[1fr_auto] sm:grid-cols-2 sm:grid-rows-1 sm:grid-cols-[1fr_auto] h-[100vh]'>
|
|
<main class='p-2'>
|
|
This is the main content
|
|
</main>
|
|
|
|
<nav class='w-full flex flex-1 sm:flex-col bg-mantle gap-1 p-1'>
|
|
{navItems.map((props, i) => (
|
|
<IconButton
|
|
{...props}
|
|
active={i == activeNavItemIndex.value}
|
|
onClick={(ev) => {
|
|
console.log({ ev, i })
|
|
activeNavItemIndex.value = i
|
|
}}
|
|
/>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
)
|
|
}
|