522875da74
* enabled fallback support and og-brand-color fix * --added react-colorful package * added colorpicker component and added it to settings/profile * lint fix * typo fix in server/viewer * clean-up * improved colorpicker component * added swatch component and integrated with brand color picker * improved ux for color picker swatch * added colorname integration Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
26 lines
666 B
TypeScript
26 lines
666 B
TypeScript
import classNames from "@lib/classNames";
|
|
|
|
export type SwatchProps = {
|
|
size?: "base" | "sm" | "lg";
|
|
backgroundColor: string;
|
|
onClick: () => void;
|
|
};
|
|
|
|
const Swatch = (props: SwatchProps) => {
|
|
const { size, backgroundColor, onClick } = props;
|
|
return (
|
|
<div className="p-1 border-2 border-gray-200 shadow-sm">
|
|
<div
|
|
onClick={onClick}
|
|
style={{ backgroundColor }}
|
|
className={classNames(
|
|
"cursor-pointer",
|
|
size === "sm" && "w-6 h-6 rounded-sm",
|
|
size === "base" && "w-16 h-16 rounded-sm",
|
|
size === "lg" && "w-24 h-24 rounded-sm"
|
|
)}></div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Swatch;
|