ec04f568dd
Wires up react-router-dom so the sidebar nav actually navigates between pages, with route-aware active highlighting and dynamic page titles. Extracts Glance content into its own page component and adds a new Infrastructure page matching the mockup: status cards, resource distribution/cost breakdown donuts, infra map, top resources by utilization, resource trend chart, recent activity, and footer stats.
51 lines
1.8 KiB
TypeScript
51 lines
1.8 KiB
TypeScript
import StatusCards from '../components/StatusCards'
|
|
import MiddleRow from '../components/MiddleRow'
|
|
import BottomRow from '../components/BottomRow'
|
|
|
|
export default function Glance() {
|
|
return (
|
|
<>
|
|
{/* Hero + KPI overlap — KPI bottom aligns with banner bottom */}
|
|
<div className="relative w-full shrink-0 overflow-hidden" style={{ height: '240px' }}>
|
|
<img
|
|
src="/archnest-hero-banner.png"
|
|
alt="ArchNest Banner"
|
|
className="absolute inset-0 h-full w-full"
|
|
style={{
|
|
objectFit: 'cover',
|
|
objectPosition: 'center 35%',
|
|
maskImage: 'linear-gradient(to bottom, black 0%, black 45%, transparent 95%)',
|
|
WebkitMaskImage: 'linear-gradient(to bottom, black 0%, black 45%, transparent 95%)',
|
|
}}
|
|
onError={(e) => {
|
|
const target = e.currentTarget
|
|
target.style.display = 'none'
|
|
target.parentElement!.classList.add('bg-card')
|
|
}}
|
|
/>
|
|
{/* Side vignette so the rectangular image blends into the page edges */}
|
|
<div
|
|
className="pointer-events-none absolute inset-0"
|
|
style={{
|
|
background:
|
|
'radial-gradient(ellipse 75% 100% at center, transparent 55%, var(--color-page) 100%)',
|
|
}}
|
|
/>
|
|
{/* KPI cards positioned so their bottom edge aligns with banner bottom */}
|
|
<div className="absolute bottom-0 left-0 right-0 z-10 px-4">
|
|
<StatusCards />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Middle Row — stretches to fill available vertical space */}
|
|
<div className="min-h-0 flex-1">
|
|
<MiddleRow />
|
|
</div>
|
|
|
|
{/* Bottom Row — anchored to the bottom */}
|
|
<div className="shrink-0">
|
|
<BottomRow />
|
|
</div>
|
|
</>
|
|
)
|
|
}
|