78 lines
1.6 KiB
TypeScript
78 lines
1.6 KiB
TypeScript
import PropTypes from 'prop-types';
|
|
|
|
export function Color(props) {
|
|
const { color } = props;
|
|
const resolvedColor = getComputedStyle(document.documentElement).getPropertyValue(`--${color}`);
|
|
|
|
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 = {
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
textShadow: '0 0 15px black',
|
|
height: '70%',
|
|
width: '100%',
|
|
backgroundColor: resolvedColor,
|
|
};
|
|
|
|
const colorTextStyle = {
|
|
color: 'white',
|
|
alignText: 'center',
|
|
};
|
|
|
|
const colorDescriptionStyle = {
|
|
margin: '5px',
|
|
color: 'gray',
|
|
fontSize: '0.9vw',
|
|
textAlign: 'center' as 'center',
|
|
};
|
|
|
|
return (
|
|
<figure style={containerStyle}>
|
|
<div style={colorBlockStyle}>
|
|
<div style={colorTextStyle}>{resolvedColor}</div>
|
|
</div>
|
|
<figcaption style={colorDescriptionStyle}>{color}</figcaption>
|
|
</figure>
|
|
);
|
|
}
|
|
|
|
Color.propTypes = {
|
|
color: PropTypes.string.isRequired,
|
|
};
|
|
|
|
const rowStyle = {
|
|
display: 'flex',
|
|
flexDirection: 'row' as 'row',
|
|
flexWrap: 'wrap' as 'wrap',
|
|
alignItems: 'center',
|
|
};
|
|
|
|
export function ColorRow(props) {
|
|
const { colors } = props;
|
|
|
|
return (
|
|
<div style={rowStyle}>
|
|
{colors.map(color => (
|
|
<Color key={color} color={color} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
ColorRow.propTypes = {
|
|
colors: PropTypes.arrayOf(PropTypes.string).isRequired,
|
|
};
|