71 lines
2.3 KiB
TypeScript
71 lines
2.3 KiB
TypeScript
|
import { useState } from 'react'
|
||
|
|
import Sidebar from './components/Sidebar'
|
||
|
|
import TopBar from './components/TopBar'
|
||
|
|
import StatusCards from './components/StatusCards'
|
||
|
|
import MiddleRow from './components/MiddleRow'
|
||
|
|
import BottomRow from './components/BottomRow'
|
||
|
|
|
||
|
|
function App() {
|
||
|
|
const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
|
||
|
|
const sidebarWidth = sidebarCollapsed ? 60 : 140
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen w-screen overflow-hidden bg-page">
|
||
|
|
<Sidebar
|
||
|
|
collapsed={sidebarCollapsed}
|
||
|
|
onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<main
|
||
|
|
className="h-screen overflow-hidden"
|
||
|
|
style={{ marginLeft: `${sidebarWidth}px`, width: `calc(100vw - ${sidebarWidth}px)` }}
|
||
|
|
>
|
||
|
|
<TopBar />
|
||
|
|
|
||
|
|
<section
|
||
|
|
className="w-full overflow-y-auto"
|
||
|
|
style={{ height: 'calc(100vh - 56px)', scrollbarWidth: 'none', padding: '16px 24px 32px 24px' }}
|
||
|
|
>
|
||
|
|
<div className="flex w-full max-w-none flex-col gap-0">
|
||
|
|
{/* Hero + KPI overlap — KPI bottom aligns with banner bottom */}
|
||
|
|
<div className="relative">
|
||
|
|
<div className="w-full overflow-hidden" style={{ borderRadius: '12px 12px 0 0' }}>
|
||
|
|
<img
|
||
|
|
src="/archnest-hero-banner.png"
|
||
|
|
alt="ArchNest Banner"
|
||
|
|
className="w-full"
|
||
|
|
style={{ display: 'block' }}
|
||
|
|
onError={(e) => {
|
||
|
|
const target = e.currentTarget
|
||
|
|
target.style.display = 'none'
|
||
|
|
target.parentElement!.classList.add('bg-card')
|
||
|
|
target.parentElement!.style.height = '260px'
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
{/* 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>
|
||
|
|
|
||
|
|
{/* 24px breathing room between KPI row and middle row */}
|
||
|
|
<div style={{ height: '24px' }} />
|
||
|
|
|
||
|
|
{/* Middle Row */}
|
||
|
|
<MiddleRow />
|
||
|
|
|
||
|
|
{/* Gap */}
|
||
|
|
<div style={{ height: '24px' }} />
|
||
|
|
|
||
|
|
{/* Bottom Row */}
|
||
|
|
<BottomRow />
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default App
|