ben.stull
afe36fd347
Claude Design export for SD-0001 (login + create-storefront surfaces): wf-*/hf-* screens, design-system bundle, offline preview. First artifact in the ui/designs/ collection (ecomm#8). Also ignore .DS_Store. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
81 lines
3.9 KiB
React
81 lines
3.9 KiB
React
// hf-admin.jsx — Admin shell (PUC-8 / PUC-9) hi-fi. Honestly empty + states.
|
|
const { HFScreen: AScreen, HFTopBar: ATopBar, HFAccountChip: AChip, HFBanner: ABanner,
|
|
HFStateCard: AStateCard, HFStates: AStates, HF_H: A, HF_STORE: ASTORE, HF_DSC: ADS } = window;
|
|
const { Eyebrow: AEyebrow, Soul: ASoul } = ADS;
|
|
|
|
// storefront identity lockup — the admin's anchor
|
|
function StoreId({ size = 17 }) {
|
|
return (
|
|
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 11 }}>
|
|
<img src={window.HF_ASSET('markTile', 'assets/mark-tile.svg')} width={size + 7} height={size + 7} style={{ borderRadius: 7, display: 'block' }} alt="" />
|
|
<span style={{ display: 'inline-flex', flexDirection: 'column', lineHeight: 1.12 }}>
|
|
<span style={{ fontFamily: A.disp, fontWeight: 700, fontSize: size, color: A.star, letterSpacing: '-0.01em' }}>{ASTORE}</span>
|
|
<span style={{ fontFamily: A.body, fontSize: 11, color: A.mute }}>ecomm storefront</span>
|
|
</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
// the honest-empty centerpiece — intentional, not sparse
|
|
function EmptyHome({ compact = false }) {
|
|
return (
|
|
<div style={{
|
|
flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
|
|
textAlign: 'center', padding: compact ? '40px 24px' : '0 64px', position: 'relative',
|
|
}}>
|
|
{/* faint constellation seal — one decorative mark, low alpha */}
|
|
<div style={{ width: compact ? 64 : 76, height: compact ? 64 : 76, borderRadius: '50%', border: `1px solid ${A.hairCard}`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 26, background: 'var(--wv-lilac-08)' }}>
|
|
<img src={window.HF_ASSET('markGold', 'assets/mark-mono-gold.svg')} width={compact ? 30 : 36} height={compact ? 30 : 36} alt="" style={{ opacity: 0.9 }} />
|
|
</div>
|
|
<AEyebrow style={{ margin: '0 0 12px' }}>Your storefront</AEyebrow>
|
|
<h1 style={{ fontFamily: A.disp, fontWeight: 700, letterSpacing: '-0.015em', lineHeight: 1.04, fontSize: compact ? 30 : 42, color: A.star, margin: '0 0 16px' }}>{ASTORE}</h1>
|
|
<p style={{ fontFamily: A.body, fontSize: compact ? 15 : 17, lineHeight: 1.6, color: A.soft, maxWidth: 460, margin: '0 0 28px', textWrap: 'pretty' }}>
|
|
There's nothing to manage yet — and that's a finished state, not a missing one.
|
|
Catalog, orders, and settings will appear here as ecomm grows.
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function HFAdmin({ device = 'desktop' }) {
|
|
const desktop = device === 'desktop';
|
|
return (
|
|
<AScreen stars={false}>
|
|
<ATopBar pad={desktop ? '0 36px' : '0 20px'} left={<StoreId size={desktop ? 17 : 15} />}
|
|
right={desktop ? <AChip /> : <button className="signout">Sign out</button>} />
|
|
<EmptyHome compact={!desktop} />
|
|
</AScreen>
|
|
);
|
|
}
|
|
|
|
function HFAdminStates() {
|
|
return (
|
|
<AStates>
|
|
<AStateCard label="Loading" note="skeleton while /me resolves">
|
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 13 }}>
|
|
<Skel w={56} h={56} r={28} />
|
|
<Skel w={90} h={11} />
|
|
<Skel w={180} h={26} />
|
|
<Skel w={300} h={11} />
|
|
<Skel w={260} h={11} />
|
|
</div>
|
|
</AStateCard>
|
|
<AStateCard label="Session expired" note="PUC-9 · redirect to sign-in">
|
|
<ABanner tone="info" title="Your session ended">
|
|
For your security you've been signed out. <a className="lk" href="#">Sign in again →</a>
|
|
</ABanner>
|
|
</AStateCard>
|
|
<AStateCard label="Account menu" note="PUC-9 · sign out">
|
|
<div style={{ position: 'relative', height: 150, display: 'flex', justifyContent: 'flex-end' }}>
|
|
<AChip menu />
|
|
</div>
|
|
</AStateCard>
|
|
</AStates>
|
|
);
|
|
}
|
|
function Skel({ w, h, r = 6 }) {
|
|
return <div style={{ width: w, height: h, borderRadius: r, background: 'linear-gradient(90deg, rgba(237,234,255,.06), rgba(237,234,255,.12), rgba(237,234,255,.06))' }} />;
|
|
}
|
|
|
|
Object.assign(window, { HFAdmin, HFAdminStates });
|