264 lines
10 KiB
TypeScript
264 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import { useCanvas } from '@/store/canvas';
|
|
|
|
interface ArtboardProps {
|
|
id: string;
|
|
label: string;
|
|
x: number;
|
|
y: number;
|
|
width: number;
|
|
height: number;
|
|
}
|
|
|
|
export function Artboard({ id, label, x, y, width, height }: ArtboardProps) {
|
|
const { selectedArtboardId, selectArtboard } = useCanvas();
|
|
const selected = selectedArtboardId === id;
|
|
|
|
return (
|
|
<div
|
|
style={{ position: 'absolute', top: y, left: x }}
|
|
onClick={(e) => { e.stopPropagation(); selectArtboard(id); }}
|
|
>
|
|
{/* Label */}
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
top: -24,
|
|
left: 0,
|
|
fontSize: 11,
|
|
fontFamily: "'JetBrains Mono', 'SF Mono', ui-monospace, monospace",
|
|
fontWeight: selected ? 500 : 400,
|
|
color: selected ? '#3385FF' : 'rgba(255,255,255,0.35)',
|
|
userSelect: 'none',
|
|
whiteSpace: 'nowrap',
|
|
letterSpacing: '-0.01em',
|
|
transition: 'color 0.15s',
|
|
}}
|
|
>
|
|
{label}
|
|
</div>
|
|
|
|
{/* Frame */}
|
|
<div
|
|
style={{
|
|
width,
|
|
height,
|
|
background: '#FFFFFF',
|
|
borderRadius: 8,
|
|
boxShadow: selected
|
|
? '0 0 0 2px #3385FF, 0 12px 48px rgba(0,0,0,0.65)'
|
|
: '0 4px 28px rgba(0,0,0,0.55)',
|
|
overflow: 'hidden',
|
|
position: 'relative',
|
|
cursor: selected ? 'default' : 'pointer',
|
|
transition: 'box-shadow 0.15s',
|
|
}}
|
|
>
|
|
{/* Selection handles */}
|
|
{selected && (
|
|
<>
|
|
<Handle pos={{ top: -4, left: -4 }} />
|
|
<Handle pos={{ top: -4, right: -4 }} />
|
|
<Handle pos={{ bottom: -4, left: -4 }} />
|
|
<Handle pos={{ bottom: -4, right: -4 }} />
|
|
</>
|
|
)}
|
|
|
|
{/* Per-artboard content */}
|
|
<ArtboardContent id={id} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ArtboardContent({ id }: { id: string }) {
|
|
switch (id) {
|
|
case 'dashboard-card': return <DashboardCard />;
|
|
case 'user-profile': return <UserProfile />;
|
|
case 'nav-sidebar': return <NavSidebar />;
|
|
case 'data-table': return <DataTable />;
|
|
default: return <Placeholder label={id} />;
|
|
}
|
|
}
|
|
|
|
// ── DashboardCard ──────────────────────────────────────────
|
|
function DashboardCard() {
|
|
return (
|
|
<div style={{ padding: 20 }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
|
|
<span style={{ fontSize: 11, fontWeight: 600, color: '#111', letterSpacing: '-0.01em' }}>Revenue Overview</span>
|
|
<span style={{ fontSize: 9, background: '#ECFDF5', color: '#059669', padding: '2px 7px', borderRadius: 99, fontWeight: 600, fontFamily: 'monospace' }}>Live</span>
|
|
</div>
|
|
<div style={{ fontSize: 24, fontWeight: 800, color: '#0A0A0A', letterSpacing: '-0.045em', lineHeight: 1, marginBottom: 4 }}>$12,450</div>
|
|
<div style={{ fontSize: 10, color: '#059669', fontWeight: 500, marginBottom: 14, display: 'flex', alignItems: 'center', gap: 3 }}>
|
|
<span>↑</span> +2.4% vs last month
|
|
</div>
|
|
<div style={{ height: 3, background: '#F0F0F0', borderRadius: 99, overflow: 'hidden', marginBottom: 14 }}>
|
|
<div style={{ height: '100%', width: '68%', background: 'linear-gradient(90deg, #0066FF, #3385FF)', borderRadius: 99 }} />
|
|
</div>
|
|
<div style={{ display: 'flex', gap: 4 }}>
|
|
<Tag>Q4 2024</Tag>
|
|
<Tag>MRR</Tag>
|
|
<Tag>SaaS</Tag>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── UserProfile ────────────────────────────────────────────
|
|
function UserProfile() {
|
|
return (
|
|
<div style={{ padding: 20, display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%' }}>
|
|
<div style={{ width: 52, height: 52, borderRadius: '50%', background: 'linear-gradient(135deg, #7C3AED, #0066FF)', marginBottom: 12 }} />
|
|
<div style={{ fontSize: 13, fontWeight: 700, color: '#0A0A0A', letterSpacing: '-0.025em', marginBottom: 3 }}>Sarah Chen</div>
|
|
<div style={{ fontSize: 10, color: '#A1A1AA', marginBottom: 16 }}>Design Engineer</div>
|
|
<div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 7 }}>
|
|
{[['Team', 'Acme Inc'], ['Role', 'Admin'], ['Plan', 'Team']].map(([k, v]) => (
|
|
<div key={k} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10 }}>
|
|
<span style={{ color: '#A1A1AA' }}>{k}</span>
|
|
<span style={{ fontWeight: 500, color: '#0A0A0A' }}>{v}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<button style={{ marginTop: 16, width: '100%', padding: '7px 0', borderRadius: 6, border: '1px solid #E4E4E7', background: '#FAFAFA', fontSize: 10, fontWeight: 600, color: '#3F3F46', cursor: 'default' }}>
|
|
Edit profile
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── NavSidebar ─────────────────────────────────────────────
|
|
function NavSidebar() {
|
|
const items = [
|
|
{ icon: '⊞', label: 'Dashboard', active: true },
|
|
{ icon: '◉', label: 'Origin Graph', active: false },
|
|
{ icon: '⬜', label: 'Artboards', active: false },
|
|
{ icon: '△', label: 'Diffs', active: false },
|
|
{ icon: '🔗', label: 'Integrations',active: false },
|
|
];
|
|
return (
|
|
<div style={{ height: '100%', background: '#FAFAFA', display: 'flex', flexDirection: 'column', padding: '12px 0' }}>
|
|
<div style={{ padding: '0 12px 12px', fontSize: 11, fontWeight: 800, letterSpacing: '-0.04em', color: '#0A0A0A' }}>
|
|
Origin<span style={{ color: '#0066FF' }}>main</span>
|
|
</div>
|
|
<div style={{ height: 1, background: '#EBEBEB', margin: '0 0 8px' }} />
|
|
{items.map(({ icon, label, active }) => (
|
|
<div
|
|
key={label}
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
padding: '7px 12px',
|
|
margin: '1px 6px',
|
|
borderRadius: 5,
|
|
background: active ? 'rgba(0,102,255,0.07)' : 'transparent',
|
|
fontSize: 10,
|
|
fontWeight: active ? 600 : 400,
|
|
color: active ? '#0066FF' : '#52525B',
|
|
cursor: 'default',
|
|
}}
|
|
>
|
|
<span style={{ fontSize: 11 }}>{icon}</span>
|
|
{label}
|
|
</div>
|
|
))}
|
|
<div style={{ marginTop: 'auto', padding: '8px 12px 0', borderTop: '1px solid #EBEBEB' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
<div style={{ width: 24, height: 24, borderRadius: '50%', background: 'linear-gradient(135deg, #7C3AED, #0066FF)', flexShrink: 0 }} />
|
|
<div>
|
|
<div style={{ fontSize: 9, fontWeight: 600, color: '#0A0A0A' }}>Sarah Chen</div>
|
|
<div style={{ fontSize: 8, color: '#A1A1AA' }}>Admin</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── DataTable ──────────────────────────────────────────────
|
|
function DataTable() {
|
|
const rows = [
|
|
{ name: 'DashboardCard', status: 'Live', nodes: 12, tokens: 8 },
|
|
{ name: 'UserProfile', status: 'Draft', nodes: 7, tokens: 3 },
|
|
{ name: 'NavSidebar', status: 'Live', nodes: 19, tokens: 11 },
|
|
{ name: 'DataTable', status: 'Review', nodes: 24, tokens: 14 },
|
|
];
|
|
return (
|
|
<div style={{ padding: '16px 0', height: '100%', display: 'flex', flexDirection: 'column' }}>
|
|
<div style={{ padding: '0 16px 12px', fontSize: 11, fontWeight: 700, color: '#0A0A0A', letterSpacing: '-0.02em' }}>
|
|
Component Inventory
|
|
</div>
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 60px 50px 50px', padding: '0 16px 6px', gap: 4 }}>
|
|
{['Name', 'Status', 'Nodes', 'Tokens'].map(h => (
|
|
<span key={h} style={{ fontFamily: 'monospace', fontSize: 8, color: '#A1A1AA', letterSpacing: '0.05em', textTransform: 'uppercase' }}>{h}</span>
|
|
))}
|
|
</div>
|
|
<div style={{ height: 1, background: '#F0F0F0' }} />
|
|
{rows.map((row, i) => (
|
|
<div
|
|
key={row.name}
|
|
style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: '1fr 60px 50px 50px',
|
|
padding: '8px 16px',
|
|
gap: 4,
|
|
background: i % 2 === 0 ? 'transparent' : '#FAFAFA',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<span style={{ fontSize: 10, fontWeight: 500, color: '#0A0A0A', letterSpacing: '-0.01em' }}>{row.name}</span>
|
|
<span style={{
|
|
fontSize: 8,
|
|
fontWeight: 600,
|
|
color: row.status === 'Live' ? '#059669' : row.status === 'Draft' ? '#6B7280' : '#D97706',
|
|
background: row.status === 'Live' ? '#ECFDF5' : row.status === 'Draft' ? '#F9FAFB' : '#FFFBEB',
|
|
padding: '2px 6px',
|
|
borderRadius: 99,
|
|
width: 'fit-content',
|
|
fontFamily: 'monospace',
|
|
}}>
|
|
{row.status}
|
|
</span>
|
|
<span style={{ fontSize: 10, color: '#52525B', fontFamily: 'monospace' }}>{row.nodes}</span>
|
|
<span style={{ fontSize: 10, color: '#52525B', fontFamily: 'monospace' }}>{row.tokens}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Placeholder({ label }: { label: string }) {
|
|
return (
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', color: '#A1A1AA', fontSize: 11 }}>
|
|
{label}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Handle({ pos }: { pos: React.CSSProperties }) {
|
|
return (
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
width: 8,
|
|
height: 8,
|
|
background: '#fff',
|
|
border: '2px solid #3385FF',
|
|
borderRadius: 2,
|
|
zIndex: 10,
|
|
...pos,
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function Tag({ children }: { children: string }) {
|
|
return (
|
|
<span style={{ fontSize: 9, background: '#F4F4F5', color: '#71717A', padding: '3px 8px', borderRadius: 99, fontWeight: 500 }}>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|