snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

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

@@ -0,0 +1,56 @@
+/**
+ * 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>
+  );
+}