51d553559f
* 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>
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="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;
|