83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
import { useEffect } from 'hono/jsx'
|
||
import { navigate } from '../router'
|
||
import { dashboardTab, isNarrow, setMobileSidebar } from '../state'
|
||
import {
|
||
HamburgerButton,
|
||
HamburgerLine,
|
||
DashboardContainer,
|
||
DashboardHeader,
|
||
DashboardTitle,
|
||
SettingsGear,
|
||
Tab,
|
||
TabBar,
|
||
TabContent,
|
||
} from '../styles'
|
||
import { UnifiedLogs, initUnifiedLogs, scrollLogsToBottom } from './UnifiedLogs'
|
||
import { Urls } from './Urls'
|
||
import { Vitals, initVitals } from './Vitals'
|
||
|
||
export function DashboardLanding({ render }: { render: () => void }) {
|
||
useEffect(() => {
|
||
initUnifiedLogs()
|
||
initVitals()
|
||
if (dashboardTab === 'logs') scrollLogsToBottom()
|
||
}, [])
|
||
|
||
const narrow = isNarrow || undefined
|
||
|
||
const openSettings = () => {
|
||
navigate('/settings')
|
||
}
|
||
|
||
const switchTab = (tab: typeof dashboardTab) => {
|
||
navigate(tab === 'urls' ? '/' : `/${tab}`)
|
||
if (tab === 'logs') scrollLogsToBottom()
|
||
}
|
||
|
||
return (
|
||
<DashboardContainer narrow={narrow} relative>
|
||
<SettingsGear
|
||
onClick={openSettings}
|
||
title="Settings"
|
||
style={{ position: 'absolute', top: 16, right: 16 }}
|
||
>
|
||
⚙️
|
||
</SettingsGear>
|
||
{isNarrow && (
|
||
<HamburgerButton
|
||
onClick={() => { setMobileSidebar(true); render() }}
|
||
title="Show apps"
|
||
style={{ position: 'absolute', top: 16, left: 16 }}
|
||
>
|
||
<HamburgerLine />
|
||
<HamburgerLine />
|
||
<HamburgerLine />
|
||
</HamburgerButton>
|
||
)}
|
||
<DashboardHeader>
|
||
<DashboardTitle narrow={narrow}>
|
||
🐾 Toes
|
||
</DashboardTitle>
|
||
</DashboardHeader>
|
||
|
||
<TabBar centered>
|
||
<Tab active={dashboardTab === 'urls' || undefined} onClick={() => switchTab('urls')}>URLs</Tab>
|
||
<Tab active={dashboardTab === 'logs' || undefined} onClick={() => switchTab('logs')}>Logs</Tab>
|
||
<Tab active={dashboardTab === 'metrics' || undefined} onClick={() => switchTab('metrics')}>Metrics</Tab>
|
||
</TabBar>
|
||
|
||
<TabContent active={dashboardTab === 'urls' || undefined}>
|
||
<Urls render={render} />
|
||
</TabContent>
|
||
|
||
<TabContent active={dashboardTab === 'logs' || undefined}>
|
||
<UnifiedLogs />
|
||
</TabContent>
|
||
|
||
<TabContent active={dashboardTab === 'metrics' || undefined}>
|
||
<Vitals />
|
||
</TabContent>
|
||
</DashboardContainer>
|
||
)
|
||
}
|