toes/src/client/components/DashboardLanding.tsx
2026-02-13 09:02:21 -08:00

47 lines
1.2 KiB
TypeScript

import { useEffect } from 'hono/jsx'
import { apps, setSelectedApp } from '../state'
import {
DashboardContainer,
DashboardHeader,
DashboardSubtitle,
DashboardTitle,
StatusDot,
StatusDotLink,
StatusDotsRow,
} from '../styles'
import { update } from '../update'
import { UnifiedLogs, initUnifiedLogs } from './UnifiedLogs'
import { Vitals, initVitals } from './Vitals'
export function DashboardLanding() {
useEffect(() => {
initUnifiedLogs()
initVitals()
}, [])
return (
<DashboardContainer>
<DashboardHeader>
<DashboardTitle>🐾 Toes</DashboardTitle>
{/*<DashboardSubtitle>Your personal web appliance</DashboardSubtitle>*/}
</DashboardHeader>
<StatusDotsRow>
{[...apps.filter(a => !a.tool), ...apps.filter(a => a.tool)].map(app => (
<StatusDotLink key={app.name} data-tooltip={app.name} onClick={(e: Event) => {
e.preventDefault()
setSelectedApp(app.name)
update()
}}>
<StatusDot state={app.state} data-app={app.name} />
</StatusDotLink>
))}
</StatusDotsRow>
<Vitals />
<UnifiedLogs />
</DashboardContainer>
)
}