Paul Payne
bc915d23fb
Introduce a Layout shell with a collapsible left sidebar (state persisted to localStorage) that becomes a hamburger drawer under md. Break the single Dashboard into routed pages — Overview (summary tiles + node bar), Services, Scheduled, Programs, Gateway, Mesh — nested under the shared Layout via an Outlet. Centralize useEventStream in Layout (drop the per-page duplicates), repoint detail-page back links at their section pages, and remove the now-dead SectionHeader component / SECTION_HEADERS map (each page owns its header).
21 lines
620 B
TypeScript
21 lines
620 B
TypeScript
import { useMemo } from "react"
|
|
import type { ServiceSummary, HealthStatus } from "@/types"
|
|
import { ServiceCard } from "./ServiceCard"
|
|
|
|
interface ServiceSectionProps {
|
|
services: ServiceSummary[]
|
|
statuses: HealthStatus[]
|
|
}
|
|
|
|
export function ServiceSection({ services, statuses }: ServiceSectionProps) {
|
|
const statusMap = useMemo(() => new Map(statuses.map((s) => [s.id, s])), [statuses])
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{services.map((svc) => (
|
|
<ServiceCard key={svc.id} service={svc} health={statusMap.get(svc.id)} />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|