15 lines
1.5 KiB
TypeScript
15 lines
1.5 KiB
TypeScript
import type {Layout} from '../lib/layout-parameters';
|
|
import {paperColor,textColor,defaultText,textSize,slotPosition,imageShape,decorationKind} from '../lib/native-layout';
|
|
import {CurvedCopy} from './NativeCurvedCopy';
|
|
/** The catalogue uses the same native type, contours and ornament as the rendered page. */
|
|
export function NativePreview({layout}:{layout:Layout}){
|
|
return <div className={'native-layout '+layout.id} style={{aspectRatio:`${layout.width}/${layout.height}`,backgroundColor:paperColor(layout.id)}} aria-label={layout.name} data-layout-id={layout.id}>
|
|
{['image','decoration','text'].flatMap(kind=>layout.elements.filter(s=>s.kind===kind).map(s=>{
|
|
const text=defaultText(layout,s),style={fontSize:textSize(layout,s,text)/layout.width*100+'cqw',color:textColor(layout.id,s)};
|
|
return <div key={s.id} data-element={s.id} className={'native-element native-'+kind} style={{...slotPosition(layout,s),zIndex:kind==='text'?3:kind==='image'?1:2}}>
|
|
{kind==='text'?(s.direction==='curved'?<CurvedCopy layout={layout} slot={s} value={text} style={style}/>:<div className={'native-copy direction-'+s.direction} style={style}>{text}</div>):kind==='image'?<div className="native-image-fill" style={imageShape(layout,s)}/>:<div className={'native-decoration decoration-'+decorationKind(s)} style={{color:'#83908a',backgroundColor:decorationKind(s)==='band'?'#dce1d8':undefined}}>{decorationKind(s)==='lines'&&Array.from({length:s.box[3]>4?3:1},(_,i)=><i key={i}/>)}{decorationKind(s)==='vertical-lines'&&<><i/><i/><i/></>}</div>}
|
|
</div>;
|
|
}))}
|
|
</div>;
|
|
}
|