Basic layout in place

This commit is contained in:
Daniel Flanagan 2024-08-24 07:54:43 -05:00
parent 1a3c11ebf0
commit 5f7b3ef04d
3 changed files with 64 additions and 43 deletions

View file

@ -8,6 +8,7 @@ import * as $api_joke from './routes/api/joke.ts'
import * as $greet_name_ from './routes/greet/[name].tsx' import * as $greet_name_ from './routes/greet/[name].tsx'
import * as $index from './routes/index.tsx' import * as $index from './routes/index.tsx'
import * as $Counter from './islands/Counter.tsx' import * as $Counter from './islands/Counter.tsx'
import * as $Dashboard from './islands/Dashboard.tsx'
import { type Manifest } from '$fresh/server.ts' import { type Manifest } from '$fresh/server.ts'
const manifest = { const manifest = {
@ -20,6 +21,7 @@ const manifest = {
}, },
islands: { islands: {
'./islands/Counter.tsx': $Counter, './islands/Counter.tsx': $Counter,
'./islands/Dashboard.tsx': $Dashboard,
}, },
baseUrl: import.meta.url, baseUrl: import.meta.url,
} satisfies Manifest } satisfies Manifest

60
islands/Dashboard.tsx Normal file
View file

@ -0,0 +1,60 @@
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>
)
}

View file

@ -1,46 +1,5 @@
import { VNode } from 'https://esm.sh/v128/preact@10.19.6/src/index.js' import Dashboard from '../islands/Dashboard.tsx'
import { JSX } from 'preact'
interface Budget {
name: string
target: number
buffer?: number
}
interface IconButtonProps {
text: string
icon: string
}
function IconButton(
{ icon, text, ...props }:
& IconButtonProps
& JSX.HTMLAttributes<HTMLAnchorElement>,
) {
return (
<a
href='#'
class='p-2 flex flex-col flex-1 bg-bg justify-center items-center text-center'
{...props}
>
<i>{icon}</i>
<span>{text}</span>
</a>
)
}
export default function Home() { export default function Home() {
return ( return <Dashboard />
<div class='flex flex-col sm:flex-row min-h-full'>
<main class='p-2'>
This is the main content
</main>
<nav class='w-full mt-auto sm:ml-auto flex flex-1 bg-mantle gap-1 p-1'>
<IconButton text='Some Text' icon='Some Icon' />
<IconButton text='Some Text' icon='Some Icon' />
<IconButton text='Some Text' icon='Some Icon' />
</nav>
</div>
)
} }