Repository: benawad/dogehouse
File: kibbeh/src/ui/NativeCheckbox.tsx (TypeScript)

Code before:
};

export interface NativeCheckboxProps {
  title: string;
  subtitle: string;
  onClick?: (num: number | undefined) => void;
  checked?: boolean;
  num?: number;
}

export const NativeCheckbox: React.FC<NativeCheckboxProps> = ({
  title,
  subtitle,
  onClick,
  checked = false,
  num,
}) => {
  return (
    <button
      className="w-full flex px-3 py-2 bg-primary-900 rounded-8 justify-between group"
      onClick={onClick ? () => onClick(num) : undefined}
    >
      <div className="flex flex-col items-start">
        <div className="font-bold group-hover:text-primary-100 text-primary-100 transition duration-200">
          {title}
        </div>
        <div className="text-primary-300">{subtitle}</div>
      </div>
      <div className="flex items-center justify-center">
        <Switch checked={checked} />
      </div>
    </button>
  );
};

export interface NativeCheckboxControllerProps {
  checkboxes: NativeCheckboxProps[];
}

export const NativeCheckboxController: React.FC<NativeCheckboxControllerProps> = ({
  checkboxes,
}) => {
  // Set checked items based on stored users selection
  const [currentChecked, setCurrentChecked] = useState<Array<number>>([]);

  const handleClick = (id: number | undefined) => {
    if (id !== undefined) {
      if (currentChecked.includes(id)) {
        setCurrentChecked(currentChecked.filter((e) => e !== id));
      } else {
        setCurrentChecked([...currentChecked, id]);

Review comment (suggestion):
currently, group-hover doesn't have any effect on the title. Also, line 46 should be
 ```className={`check ? "font-bold text-primary-100 transition duration-200" : "font-bold group-hover:text-primary-100 text-primary-300 transition duration-200">`}```

When the switch is checked it'll allow the user to visually see when the title turns white, otherwise, keep the hove effect primary-100 and the title primary-300 when the check is false.

Code after:
};

export interface NativeCheckboxProps {
  title: string;
  subtitle: string;
  onClick?: (num: number | undefined) => void;
  checked?: boolean;
  num?: number;
}

export const NativeCheckbox: React.FC<NativeCheckboxProps> = ({
  title,
  subtitle,
  onClick,
  checked = false,
  num,
}) => {
  return (
    <button
      className="w-full flex px-3 py-2 bg-primary-900 rounded-8 justify-between group"
      onClick={onClick ? () => onClick(num) : undefined}
    >
      <div className="flex flex-col items-start">
        <div
          className={`${
            checked
              ? "font-bold text-primary-100 transition duration-200"
              : "font-bold group-hover:text-primary-100 text-primary-300 transition duration-200"
          }`}
        >
          {title}
        </div>
        <div className="text-primary-300">{subtitle}</div>
      </div>
      <div className="flex items-center justify-center">
        <Switch checked={checked} />
      </div>
    </button>
  );
};

export interface NativeCheckboxControllerProps {
  checkboxes: NativeCheckboxProps[];
}

export const NativeCheckboxController: React.FC<NativeCheckboxControllerProps> = ({
  checkboxes,
}) => {
  // Set checked items based on stored users selection
  const [currentChecked, setCurrentChecked] = useState<Array<number>>([]);