upstream-plane/apps/web/core/components/common/access-field.tsx

/**
 * Copyright (c) 2023-present Plane Software, Inc. and contributors
 * SPDX-License-Identifier: AGPL-3.0-only
 * See the LICENSE file for details.
 */

import type { LucideIcon } from "lucide-react";
// plane ui
import { useTranslation } from "@plane/i18n";
import type { ISvgIcons } from "@plane/propel/icons";
import { Tooltip } from "@makeplane/propel/components/tooltip";
// plane utils
import { cn } from "@plane/utils";

type Props = {
  onChange: (value: number) => void;
  value: number;
  accessSpecifiers: {
    key: number;
    i18n_label: string;
    icon: LucideIcon | React.FC<ISvgIcons>;
  }[];
  isMobile?: boolean;
};

export function AccessField(props: Props) {
  const { onChange, value, accessSpecifiers, isMobile = false } = props;
  const { t } = useTranslation();

  return (
    <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded-sm border-[1px] border-subtle p-1">
      {accessSpecifiers.map((access, index) => {
        const label = t(access.i18n_label);
        return (
          <Tooltip key={access.key} label={label} layout="stacked" disabled={isMobile}>
            <button
              type="button"
              aria-label={label}
              onClick={() => onChange(access.key)}
              className={cn(
                "relative flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-xs p-1 transition-all",
                value === access.key ? "bg-layer-1" : "hover:bg-layer-1"
              )}
              tabIndex={2 + index}
            >
              <access.icon
                className={cn("h-3.5 w-3.5 transition-all", value === access.key ? "text-primary" : "text-placeholder")}
                strokeWidth={2}
              />
            </button>
          </Tooltip>
        );
      })}
    </div>
  );
}