Spaces:
Sleeping
Sleeping
File size: 2,193 Bytes
425a907 | 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 | import { STEP_LABELS } from '../utils/constants.js';
const LogoSvg = () => (
<svg viewBox="0 0 24 24" fill="none" stroke="#7ec87e" strokeWidth="2.2" strokeLinecap="round">
<path d="M12 2C8 2 4 6 4 10c0 5 8 12 8 12s8-7 8-12c0-4-4-8-8-8z"/>
<path d="M12 6v8M9 9l3-3 3 3"/>
</svg>
);
const CheckSvg = () => (
<svg width="8" height="8" viewBox="0 0 12 12" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round">
<path d="M2 6l3 3 5-5"/>
</svg>
);
export default function Header({ step, onNav, sub }) {
return (
<div className="hdr">
<div className="hdr-brand">
<div className="hdr-logo"><LogoSvg /></div>
<span className="hdr-title">Dabur Analytics</span>
<span className="hdr-sub">/ {sub}</span>
</div>
<div className="stepper" style={{ background: 'transparent', border: 'none', height: 'auto' }}>
{STEP_LABELS.map((label, i) => {
const n = i + 1;
const isDone = n < step;
const isActive = n === step;
const isPend = n > step;
const cls = isDone ? 'stp done' + (n < step ? ' clickable' : '') : isActive ? 'stp active' : 'stp pend';
return (
<>
<div
key={n}
className={cls}
style={{ cursor: isDone ? 'pointer' : 'default' }}
onClick={() => isDone && onNav(n)}
title={isDone ? `Go back to ${label}` : undefined}
>
<div className="stp-n">
{isDone ? <CheckSvg /> : n}
</div>
<span className="stp-l" style={{
color: isDone ? 'rgba(255,255,255,.55)'
: isActive ? 'rgba(255,255,255,.88)'
: 'rgba(255,255,255,.35)'
}}>
{label}
</span>
</div>
{n < STEP_LABELS.length && (
<div key={`line-${n}`} className="stp-line" style={{ background: 'rgba(255,255,255,.18)' }} />
)}
</>
);
})}
</div>
<span className="hdr-badge">Step {step} of 7</span>
</div>
);
}
|