File size: 2,783 Bytes
201b13c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | import { useState } from "react"
import { useLocation } from "react-router-dom"
import Sidebar from "./Sidebar"
const PAGE_COPY = {
"/": {
label: "Command Center",
subtitle: "Real-time manufacturing quality monitoring, reporting, and plant visibility.",
},
"/live": {
label: "Live Monitoring",
subtitle: "Choose uploaded images or browser camera feed for inspection and monitoring.",
},
"/history": {
label: "Inspection History",
subtitle: "Trace reports, decisions, and defect signatures over time.",
},
"/analytics": {
label: "Analytics",
subtitle: "Trend performance, defect mix, and production quality signals.",
},
}
function formatHeaderTime() {
return new Intl.DateTimeFormat("en-IN", {
weekday: "short",
month: "short",
day: "numeric",
hour: "numeric",
minute: "2-digit",
}).format(new Date())
}
export default function AppShell({ children }) {
const { pathname } = useLocation()
const [mobileOpen, setMobileOpen] = useState(false)
const headerCopy = PAGE_COPY[pathname] || PAGE_COPY["/"]
return (
<div className="min-h-screen text-slate-100">
<div className="flex min-h-screen">
<Sidebar mobileOpen={mobileOpen} onClose={() => setMobileOpen(false)} />
<div className="flex min-h-screen min-w-0 flex-1 flex-col lg:pl-[320px]">
<header className="sticky top-0 z-20 border-b border-white/10 bg-slate-950/[0.55] backdrop-blur-xl">
<div className="mx-auto flex w-full max-w-[1600px] items-center justify-between gap-4 px-4 py-4 sm:px-6 lg:px-8">
<div className="flex min-w-0 items-center gap-3">
<button
type="button"
className="inline-flex h-11 w-11 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-lg text-slate-100 transition hover:border-cyan-300/40 hover:bg-cyan-400/10 lg:hidden"
onClick={() => setMobileOpen(true)}
aria-label="Open navigation"
>
≡
</button>
<div className="min-w-0">
<p className="eyebrow">Manufacturing Monitoring System</p>
<h1 className="truncate text-xl font-semibold text-slate-50">{headerCopy.label}</h1>
<p className="hidden text-sm text-slate-400 sm:block">{headerCopy.subtitle}</p>
</div>
</div>
<div className="hidden rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-slate-300 sm:block">
{formatHeaderTime()}
</div>
</div>
</header>
<main className="flex flex-1">{children}</main>
</div>
</div>
</div>
)
}
|