Spaces:
Running
Running
File size: 1,884 Bytes
808332c |
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 |
// ─── Shared UI Primitives ────────────────────────────────────────────────────
export function Card({ children, style }) {
return <div className="card" style={style}>{children}</div>;
}
export function CardHeader({ icon, children, actions }) {
if (actions) {
return (
<div className="card-header-row">
<span className="card-title">
{icon && <span>{icon}</span>}
{children}
</span>
{actions}
</div>
);
}
return (
<div className="card-header">
{icon && <span>{icon}</span>}
{children}
</div>
);
}
export function Callout({ type = 'info', children }) {
return <div className={`callout callout-${type}`}>{children}</div>;
}
export function FormGroup({ label, children }) {
return (
<div className="form-group">
{label && <label>{label}</label>}
{children}
</div>
);
}
export function ResponseBox({ result }) {
if (!result) return null;
return (
<div className={`resp-box ${result.ok ? 'ok' : 'err'}`}>
{JSON.stringify(result.data, null, 2)}
</div>
);
}
export function Tag({ children }) {
return <span className="tag">{children}</span>;
}
export function Badge({ type = 'muted', children }) {
return <span className={`badge badge-${type}`}>{children}</span>;
}
export function StepBar({ steps, current }) {
return (
<div className="step-bar">
{steps.map((s, i) => (
<div
key={i}
className={`step-item ${i < current ? 'done' : i === current ? 'active' : ''}`}
>
<div className="step-num">{i < current ? '✓' : i}</div>
<div className="step-label">{s.label}</div>
<div className="step-sub">{s.sub}</div>
</div>
))}
</div>
);
}
|