think/packages/client/src/components/grid-select/grid-cell.tsx

import React from "react";
import { MouseEventHandler } from "react";

type CellProperties = {
  active: boolean;
  hover: boolean;
  disabled: boolean;
  cellSize: number;
  onClick: MouseEventHandler<HTMLDivElement>;
  onMouseEnter: MouseEventHandler<HTMLDivElement>;
  styles: Record<string, React.CSSProperties>;
  id: string;
};

const getBaseStyles = (cellSize) => ({
  cell: {
    width: cellSize,
    height: cellSize,
    background: "#fff",
    cursor: "pointer",
    borderRadius: 3,
    border: "1px solid #bababa",
  },
  active: {
    border: "1px solid #4d6cdd",
    background: "#4d6cdd",
  },
  hover: {
    border: "1px solid #fff",
    background: "#4d6cdd",
  },
  disabled: {
    filter: "brightness(0.7)",
  },
});

const getMergedStyle = (baseStyles, styles, styleClass) => ({
  ...baseStyles[styleClass],
  ...(styles && styles[styleClass] ? styles[styleClass] : {}),
});

export const GridCell = ({
  active,
  hover,
  disabled,
  onClick,
  onMouseEnter,
  cellSize,
  styles,
  id,
}: CellProperties) => {
  const baseStyles = getBaseStyles(cellSize);
  const cellStyles = {
    cell: getMergedStyle(baseStyles, styles, "cell"),
    active: getMergedStyle(baseStyles, styles, "active"),
    hover: getMergedStyle(baseStyles, styles, "hover"),
    disabled: getMergedStyle(baseStyles, styles, "disabled"),
  };

  return (
    <div
      id={id}
      style={{
        ...cellStyles.cell,
        ...(active && cellStyles.active),
        ...(hover && cellStyles.hover),
        ...(!active && disabled && cellStyles.disabled),
      }}
      onClick={onClick}
      onMouseEnter={onMouseEnter}
    />
  );
};