30 lines
961 B
TypeScript
30 lines
961 B
TypeScript
type ColorProps = {
|
|
hex: string;
|
|
noText?: boolean;
|
|
};
|
|
|
|
export const Color = (props: ColorProps) => {
|
|
const { hex, noText = false } = 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>
|
|
);
|
|
};
|