owncast/web/stories/ImageAsset.tsx
2022-05-11 23:31:31 -07:00

76 lines
1.5 KiB
TypeScript

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 (
<figure style={containerStyle}>
<a href={src} target="_blank" rel="noopener noreferrer">
<div style={imageStyle} />
<figcaption style={colorDescriptionStyle}>{name}</figcaption>
</a>
</figure>
);
}
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 (
<div style={rowStyle}>
{images.map(image => (
<ImageAsset key={image.src} src={image.src} name={image.name} />
))}
</div>
);
}
interface ImageRowProps {
images: ImageAssetProps[];
}