52 lines
1.7 KiB
JavaScript
52 lines
1.7 KiB
JavaScript
// Top-level — design canvas with desktop and tablet artboards
|
||
|
||
const { DesignCanvas, DCSection, DCArtboard } = window;
|
||
const { ChromeWindow } = window;
|
||
const { DesktopDashboard, TabletDashboard } = window.OpsLayouts;
|
||
|
||
// Tablet bezel — simple frame, since we want to communicate "tablet"
|
||
function TabletShell({ children }) {
|
||
return (
|
||
<div style={{
|
||
width: 900, height: 1180,
|
||
background: '#1a1a1a',
|
||
borderRadius: 36,
|
||
padding: 14,
|
||
boxShadow: '0 20px 50px rgba(0,0,0,0.18)',
|
||
}}>
|
||
<div style={{
|
||
width: '100%', height: '100%',
|
||
background: 'white', borderRadius: 24,
|
||
overflow: 'hidden',
|
||
}}>{children}</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function App() {
|
||
return (
|
||
<DesignCanvas title="Daily Ops Dashboard — Desktop + Tablet">
|
||
<DCSection id="desktop" title="Desktop — primary view">
|
||
<DCArtboard id="desktop-main" label="1440×900 — full operational view, mid-shift" width={1440} height={900}>
|
||
<ChromeWindow url="manage.simplepos.com/today" tabs={[{ title: 'Today · Trattoria del Sole' }]} width={1440} height={900}>
|
||
<DesktopDashboard />
|
||
</ChromeWindow>
|
||
</DCArtboard>
|
||
</DCSection>
|
||
|
||
<DCSection id="tablet" title="Tablet — portrait">
|
||
<DCArtboard id="tablet-main" label="Tablet portrait — same data, vertical stack" width={930} height={1210}>
|
||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', background: 'transparent' }}>
|
||
<TabletShell>
|
||
<TabletDashboard />
|
||
</TabletShell>
|
||
</div>
|
||
</DCArtboard>
|
||
</DCSection>
|
||
</DesignCanvas>
|
||
);
|
||
}
|
||
|
||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||
root.render(<App />);
|