export function ImageAsset(props: ImageAssetProps) { const { name, src } = props; const containerStyle = { borderRadius: '20px', width: '12vw', height: '12vw', minWidth: '100px', minHeight: '100px', borderWidth: '1.5px', borderStyle: 'solid', borderColor: 'lightgray', overflow: 'hidden', margin: '0.3vw', }; const colorBlockStyle = { height: '70%', width: '100%', backgroundColor: 'white', }; const colorDescriptionStyle = { textAlign: 'center' as 'center', color: 'gray', fontSize: '0.8em', }; const imageStyle = { width: '100%', height: '80%', backgroundRepeat: 'no-repeat', backgroundSize: 'contain', backgroundPosition: 'center', marginTop: '5px', backgroundImage: `url(${src})`, }; return (
{name}
); } interface ImageAssetProps { name: string; src: string; } const rowStyle = { display: 'flex', flexDirection: 'row' as 'row', flexWrap: 'wrap' as 'wrap', // justifyContent: 'space-around', alignItems: 'center', }; export function ImageRow(props: ImageRowProps) { const { images } = props; return (
{images.map(image => ( ))}
); } interface ImageRowProps { images: ImageAssetProps[]; }