81 lines
6.2 KiB
React
81 lines
6.2 KiB
React
// browsing.jsx — Main browsing page (real webpage open)
|
|
const BrowsingScreen = () => (
|
|
<ElyShell wallpaper="dawn" sidebarProps={{ activeId:'figma', mode:'browse', tabs:[
|
|
{ id:'figma', label:'Style Guide · Figma', icon:<Brand.Figma s={16}/>, active:true, audio:true, closable:true },
|
|
{ id:'roadmap', label:'Roadmap 2024 — Linear', icon:<Brand.Linear s={16}/> },
|
|
{ id:'mkt', label:'Marketing Site', icon:<Icon size={16} stroke="#6b6660"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18"/></Icon> },
|
|
{ id:'twt', label:'Home / X', icon:<Brand.X s={16}/> },
|
|
{ id:'gh', label:'elybrowser/core · main', icon:<Brand.GitHub s={16}/> },
|
|
] }}>
|
|
<TopBar host="figma.com" path="/file/12345/Style-Guide" canBack canForward/>
|
|
<div className="ely-scroll" style={{flex:1, overflowY:'auto', background:'#fff'}}>
|
|
{/* Mock figma-ish UI inside */}
|
|
<div style={{height:46, background:'#1d1c1a', color:'#cfcbc4', display:'flex', alignItems:'center', padding:'0 14px', fontSize:12, gap:10}}>
|
|
<div style={{display:'flex',alignItems:'center',gap:6}}><Brand.Figma s={14}/><span style={{color:'#fff', fontWeight:500}}>Style Guide</span></div>
|
|
<span style={{opacity:.55}}>/</span>
|
|
<span>ELY Design System</span>
|
|
<span style={{marginLeft:'auto', display:'flex', gap:8, alignItems:'center'}}>
|
|
<span style={{padding:'2px 8px', background:'#fff', color:'#1d1c1a', borderRadius:4, fontSize:11, fontWeight:500}}>Share</span>
|
|
<div style={{width:22,height:22,borderRadius:'50%',background:'linear-gradient(135deg,#7c6cf7,#ec6a8e)'}}/>
|
|
<div style={{width:22,height:22,borderRadius:'50%',background:'linear-gradient(135deg,#4fb59a,#7c6cf7)'}}/>
|
|
</span>
|
|
</div>
|
|
<div style={{display:'grid', gridTemplateColumns:'220px 1fr 260px', height:'calc(100% - 46px)', minHeight:560, background:'#f5f4f1'}}>
|
|
<div style={{background:'#fff', borderRight:'1px solid #ebe7e0', padding:'10px 8px', fontSize:11.5, color:'#3a3733'}}>
|
|
<div style={{padding:'4px 6px', fontWeight:600, color:'#1d1c1a'}}>Pages</div>
|
|
{['Cover','Tokens','Typography','Color','Spacing','Components','Patterns','Sandbox'].map((p,i)=>(
|
|
<div key={p} style={{padding:'5px 8px', borderRadius:5, background: i===2?'#f0e9e2':'transparent', color: i===2?'#1d1c1a':'#3a3733', display:'flex',alignItems:'center',gap:6}}>
|
|
<I.ChevronRight size={10} style={{opacity:.6}}/> {p}
|
|
</div>
|
|
))}
|
|
<div style={{padding:'10px 6px 4px', fontWeight:600, color:'#1d1c1a', marginTop:8}}>Layers</div>
|
|
{[['Frame · Display','◇'],[' H1 / Display','T'],[' H2 / Title','T'],[' H3 / Subtitle','T'],['Frame · Body','◇'],[' Paragraph','T'],[' Caption','T']].map(([n,g],i)=>(
|
|
<div key={i} style={{padding:'4px 6px', fontFamily:'monospace', fontSize:10.5, color:'#6b6660', whiteSpace:'pre'}}>{g} {n}</div>
|
|
))}
|
|
</div>
|
|
<div style={{padding:32, position:'relative', overflow:'hidden'}}>
|
|
<div style={{position:'absolute', inset:0, backgroundImage:'radial-gradient(circle at 1px 1px, rgba(0,0,0,0.06) 1px, transparent 0)', backgroundSize:'18px 18px'}}/>
|
|
<div style={{position:'relative', background:'#fff', borderRadius:6, padding:'32px 40px', boxShadow:'0 1px 0 rgba(0,0,0,0.06), 0 12px 40px -10px rgba(0,0,0,0.12)', maxWidth:520}}>
|
|
<div style={{fontSize:10.5, color:'#9a948c', letterSpacing:'0.12em', textTransform:'uppercase'}}>Display / Serif</div>
|
|
<div className="ely-serif" style={{fontSize:48, lineHeight:1.05, marginTop:8, color:'#1d1c1a'}}>The aesthetics<br/>of calm tech.</div>
|
|
<div style={{marginTop:24, display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
|
|
{['H1 / 64','H2 / 40','H3 / 28','Body / 16','Caption / 12','Mono / 13'].map((s,i)=>(
|
|
<div key={i} style={{borderTop:'1px solid #ebe7e0', paddingTop:8}}>
|
|
<div className={i<3?'ely-serif':''} style={{fontSize: i<3? 18: 13, color:'#1d1c1a', fontFamily: i===5?'monospace':undefined}}>The quick brown fox</div>
|
|
<div style={{fontSize:10.5, color:'#9a948c', marginTop:2}}>{s}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div style={{position:'absolute', bottom:14, left:14, display:'flex', gap:6, padding:'6px 10px', background:'#fff', borderRadius:6, boxShadow:'0 1px 4px rgba(0,0,0,0.08)', fontSize:11, color:'#3a3733'}}>
|
|
100% <I.ChevronDown size={10}/>
|
|
</div>
|
|
</div>
|
|
<div style={{background:'#fff', borderLeft:'1px solid #ebe7e0', padding:'12px 12px', fontSize:11.5, color:'#3a3733'}}>
|
|
<div style={{display:'flex', gap:14, fontWeight:500, color:'#1d1c1a', borderBottom:'1px solid #ebe7e0', paddingBottom:8}}>
|
|
<span style={{borderBottom:'1.5px solid #1d1c1a', paddingBottom:6}}>Design</span>
|
|
<span style={{color:'#9a948c'}}>Prototype</span>
|
|
<span style={{color:'#9a948c'}}>Inspect</span>
|
|
</div>
|
|
<div style={{paddingTop:10, color:'#9a948c'}}>Color · Local styles</div>
|
|
<div style={{display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap:6, marginTop:8}}>
|
|
{['#1d1c1a','#3a3733','#6b6660','#c96442','#ec6a8e','#7c6cf7','#4fb59a','#f6f4ef','#efe8e1','#fff3ee','#ffd1d8','#b9c7ff'].map(c=>(
|
|
<div key={c} style={{aspectRatio:'1', borderRadius:4, background:c, boxShadow:'inset 0 0 0 1px rgba(0,0,0,0.05)'}}/>
|
|
))}
|
|
</div>
|
|
<div style={{paddingTop:14, color:'#9a948c'}}>Type · Newsreader / Geist</div>
|
|
<div style={{padding:8, background:'#f6f4ef', borderRadius:6, marginTop:8, fontSize:11}}>
|
|
<div className="ely-serif" style={{fontSize:18}}>Aa Bb Cc</div>
|
|
<div style={{color:'#6b6660', marginTop:2}}>Newsreader · 6..72</div>
|
|
</div>
|
|
<div style={{paddingTop:14, color:'#9a948c'}}>Spacing</div>
|
|
<div style={{display:'flex', gap:4, marginTop:6}}>
|
|
{[4,8,12,16,24,32].map(s=>(<div key={s} style={{width:s, height:18, background:'#1d1c1a', opacity:.85}}/>))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ElyShell>
|
|
);
|
|
window.BrowsingScreen = BrowsingScreen;
|