mirror of
https://github.com/checktheroads/hyperglass
synced 2024-05-11 05:55:08 +00:00
31 lines
819 B
TypeScript
31 lines
819 B
TypeScript
type ColorProps = {
|
|
hex: string;
|
|
noText?: boolean;
|
|
};
|
|
|
|
export const Color = (props: ColorProps) => {
|
|
const { hex, noText = false } = props;
|
|
console.log(props);
|
|
return (
|
|
<span className="color-swatch-container">
|
|
<span className={['nx-rounded-sm', 'color-swatch'].join(' ')} />
|
|
<code>{noText ? '' : hex}</code>
|
|
<style jsx>{`
|
|
span.color-swatch-container {
|
|
display: inline-flex;
|
|
align-items: ${noText ? 'flex-end' : 'center'};
|
|
justify-content: space-between;
|
|
}
|
|
span.color-swatch {
|
|
display: inline-flex;
|
|
background-color: ${hex};
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
padding: 0.5rem 0.5rem;
|
|
margin-right: ${noText ? 'unset' : '0.5rem'};
|
|
}
|
|
`}</style>
|
|
</span>
|
|
);
|
|
};
|