calcom/components/Swatch.tsx
Peer Richelsen 51d553559f
tailwind prettier (#1646)
* tailwind prettier

* Minor fixes

* Sorts components and pages

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: zomars <zomars@me.com>
2022-02-09 00:05:13 +00:00

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="border-2 border-gray-200 p-1 shadow-sm">
<div
onClick={onClick}
style={{ backgroundColor }}
className={classNames(
"cursor-pointer",
size === "sm" && "h-6 w-6 rounded-sm",
size === "base" && "h-16 w-16 rounded-sm",
size === "lg" && "h-24 w-24 rounded-sm"
)}></div>
</div>
);
};
export default Swatch;