116 lines
5.0 KiB
JavaScript
116 lines
5.0 KiB
JavaScript
// App — arranges the three table-card variations inside a design canvas.
|
||
// Each variation gets its own artboard showing a 4×2 mini-grid of mixed statuses
|
||
// so you can see how they read together, plus a separate artboard showing
|
||
// hover/pressed states.
|
||
|
||
const { DesignCanvas, DCSection, DCArtboard } = window;
|
||
const { TableCardV1, TableCardV2, TableCardV3 } = window;
|
||
|
||
// Shared dataset — same across all variations so they compare fairly
|
||
const TABLES = [
|
||
{ name: 'A1', status: 'occupied', amount: 84.50, occupiedMins: 42, waiters: ['Marco Riva'], flags: [] },
|
||
{ name: 'A2', status: 'occupied', amount: 127.20, occupiedMins: 98, waiters: ['Sofia Greco'], flags: ['VIP'] },
|
||
{ name: 'A3', status: 'open', amount: null, occupiedMins: null, waiters: [], flags: [] },
|
||
{ name: 'A4', status: 'alert', amount: 56.00, occupiedMins: 73, waiters: ['Luca Bianchi'], flags: ['Allergy'] },
|
||
{ name: 'B1', status: 'reserved', amount: null, occupiedMins: null, waiters: ['Elena Costa'], flags: ['Birthday'] },
|
||
{ name: 'B2', status: 'occupied', amount: 212.80, occupiedMins: 115,waiters: ['Marco Riva', 'Sofia Greco', 'Luca Bianchi', 'Elena Costa'], flags: ['VIP'] },
|
||
{ name: 'B3', status: 'dirty', amount: null, occupiedMins: null, waiters: [], flags: [] },
|
||
{ name: 'B4', status: 'occupied', amount: 38.00, occupiedMins: 14, waiters: ['Luca Bianchi', 'Elena Costa'], flags: [] },
|
||
];
|
||
|
||
// Interaction states preview — shows the SAME card in 4 states side by side
|
||
const STATE_CARD = { name: 'A2', status: 'occupied', amount: 127.20, occupiedMins: 98, waiters: ['Sofia Greco'], flags: ['VIP'] };
|
||
|
||
function TableGrid({ Card }) {
|
||
return (
|
||
<div style={{
|
||
display: 'grid',
|
||
gridTemplateColumns: 'repeat(4, 260px)',
|
||
gap: 16,
|
||
padding: 28,
|
||
background: 'var(--bg)',
|
||
}}>
|
||
{TABLES.map((t, i) => <Card key={i} {...t} />)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function StatesStrip({ Card, label }) {
|
||
// Render four copies with simulated states by forcing CSS
|
||
return (
|
||
<div style={{ padding: 28, background: 'var(--bg)' }}>
|
||
<div style={{
|
||
display: 'grid', gridTemplateColumns: 'repeat(4, 260px)', gap: 24,
|
||
}}>
|
||
{['Default', 'Hover', 'Pressed', 'Selected'].map((state) => (
|
||
<div key={state} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||
<div style={{
|
||
fontSize: 12, fontWeight: 600, color: 'var(--ink-500)',
|
||
textTransform: 'uppercase', letterSpacing: 0.8,
|
||
}}>{state}</div>
|
||
<div className={`state-${state.toLowerCase()}`} style={{ position: 'relative' }}>
|
||
<Card {...STATE_CARD} />
|
||
{state === 'Selected' && (
|
||
<div style={{
|
||
position: 'absolute', inset: -3,
|
||
borderRadius: 17,
|
||
boxShadow: '0 0 0 3px var(--occ-500)',
|
||
pointerEvents: 'none',
|
||
}} />
|
||
)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Style overrides to force hover/pressed on the middle two */}
|
||
<style>{`
|
||
.state-hover > button {
|
||
box-shadow: var(--shadow-2) !important;
|
||
transform: translateY(-2px) !important;
|
||
}
|
||
.state-pressed > button {
|
||
box-shadow: inset 0 2px 4px rgba(16,20,24,0.08) !important;
|
||
transform: translateY(1px) !important;
|
||
}
|
||
`}</style>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function App() {
|
||
return (
|
||
<DesignCanvas title="Table Card — Variations">
|
||
<DCSection id="v1" title="Variation 1 — Left accent, stacked layout">
|
||
<DCArtboard id="v1-grid" label="Grid of 8 tables — mixed statuses" width={1104} height={420}>
|
||
<TableGrid Card={TableCardV1} />
|
||
</DCArtboard>
|
||
<DCArtboard id="v1-states" label="Interactive states" width={1160} height={260}>
|
||
<StatesStrip Card={TableCardV1} label="V1" />
|
||
</DCArtboard>
|
||
</DCSection>
|
||
|
||
<DCSection id="v2" title="Variation 2 — Top stripe, big name">
|
||
<DCArtboard id="v2-grid" label="Grid of 8 tables — mixed statuses" width={1104} height={420}>
|
||
<TableGrid Card={TableCardV2} />
|
||
</DCArtboard>
|
||
<DCArtboard id="v2-states" label="Interactive states" width={1160} height={260}>
|
||
<StatesStrip Card={TableCardV2} label="V2" />
|
||
</DCArtboard>
|
||
</DCSection>
|
||
|
||
<DCSection id="v3" title="Variation 3 — Plaque badge">
|
||
<DCArtboard id="v3-grid" label="Grid of 8 tables — mixed statuses" width={1104} height={420}>
|
||
<TableGrid Card={TableCardV3} />
|
||
</DCArtboard>
|
||
<DCArtboard id="v3-states" label="Interactive states" width={1160} height={260}>
|
||
<StatesStrip Card={TableCardV3} label="V3" />
|
||
</DCArtboard>
|
||
</DCSection>
|
||
</DesignCanvas>
|
||
);
|
||
}
|
||
|
||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||
root.render(<App />);
|