openpanel/packages/devtools-ui/src/components/checkbox-group.tsx

import React from "react";
import clsx from "clsx";
import { CheckboxFilledIcon } from "./icons/checkbox-filled";
import { CheckboxEmptyIcon } from "./icons/checkbox-empty";

type Props = {
  options: {
    label: string;
    value: string;
  }[];
  values: string[];
  onChange: (values: string[]) => void;
  className?: string;
};

export const CheckboxGroup = ({
  options,
  values,
  onChange,
  className,
}: Props) => {
  return (
    <div
      className={clsx(
        "re-relative",
        "re-flex",
        "re-flex-1",
        "re-gap-3",
        "re-min-h-[32px]",
        "re-items-center",
        "re-justify-start",
        className,
      )}
    >
      {options.map(({ label, value }) => {
        const selected = values.includes(value);

        return (
          <button
            key={value}
            type="button"
            className={clsx(
              "re-flex",
              "re-gap-1.5",
              "re-items-center",
              "re-bg-none",
              "re-border-none",
              "re-appearance-none",
              "re-outline-none",
            )}
            onClick={() => {
              if (values.includes(value)) {
                onChange(values.filter((v) => v !== value));
              } else {
                onChange([...values, value]);
              }
            }}
          >
            <span className={clsx("re-flex-shrink-0", "re-w-3", "re-h-3")}>
              {selected && (
                <CheckboxFilledIcon className="re-pointer-events-none" />
              )}
              {!selected && (
                <CheckboxEmptyIcon className="re-pointer-events-none" />
              )}
            </span>
            <span className={clsx("re-text-xs", "re-text-gray-300")}>
              {label}
            </span>
          </button>
        );
      })}
    </div>
  );
};