solid-color
Version:
<p> <img width="100%" src="https://assets.solidjs.com/banner?type=solid-color&background=tiles&project=%20" alt="solid-color"> </p>
34 lines (33 loc) • 1.41 kB
JSX
import { mergeProps } from 'solid-js';
import { getContrastingColor } from '../../helpers/color';
import { Swatch } from '../_common';
import { CheckIcon } from '../_common';
export default function SwatchesColor(_props) {
const props = mergeProps({ onClick: () => { } }, _props);
const styles = () => {
const { color, active, first, last } = props;
return {
color: {
width: '40px',
height: '24px',
cursor: 'pointer',
background: color,
'margin-bottom': '1px',
overflow: first || last ? 'hidden' : undefined,
'border-radius': first ? '2px 2px 0 0' : last ? '0 0 2px 2px' : undefined,
'box-shadow': color === '#FFFFFF' ? 'inset 0 0 0 1px #ddd' : undefined,
},
check: {
color: color === '#FFFFFF' || color === 'transparent' ? '#333' : getContrastingColor(color),
'margin-left': '8px',
display: active ? 'block' : 'none',
margin: '0 auto',
},
};
};
return (<Swatch color={props.color} styles={styles().color} onClick={props.onClick} focusStyle={{ 'box-shadow': `0 0 4px ${props.color}` }}>
<div style={styles().check}>
<CheckIcon width="24" height="24" fill="white" stroke="white"/>
</div>
</Swatch>);
}