Initial commit: Plane

Synced from upstream: 8853637e981ed7d8a6cff32bd98e7afe20f54362

apps/web/ce/components/projects/create/attributes.tsx

@@ -0,0 +1,94 @@
+"use client";
+import type { FC } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+// plane imports
+import { NETWORK_CHOICES, ETabIndices } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { IProject } from "@plane/types";
+import { CustomSelect } from "@plane/ui";
+import { getTabIndex } from "@plane/utils";
+// components
+import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
+import { ProjectNetworkIcon } from "@/components/project/project-network-icon";
+
+type Props = {
+  isMobile?: boolean;
+};
+
+const ProjectAttributes: FC<Props> = (props) => {
+  const { isMobile = false } = props;
+  const { t } = useTranslation();
+  const { control } = useFormContext<IProject>();
+  const { getIndex } = getTabIndex(ETabIndices.PROJECT_CREATE, isMobile);
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Controller
+        name="network"
+        control={control}
+        render={({ field: { onChange, value } }) => {
+          const currentNetwork = NETWORK_CHOICES.find((n) => n.key === value);
+
+          return (
+            <div className="flex-shrink-0 h-7" tabIndex={getIndex("network")}>
+              <CustomSelect
+                value={value}
+                onChange={onChange}
+                label={
+                  <div className="flex items-center gap-1 h-full">
+                    {currentNetwork ? (
+                      <>
+                        <ProjectNetworkIcon iconKey={currentNetwork.iconKey} />
+                        {t(currentNetwork.i18n_label)}
+                      </>
+                    ) : (
+                      <span className="text-custom-text-400">{t("select_network")}</span>
+                    )}
+                  </div>
+                }
+                placement="bottom-start"
+                className="h-full"
+                buttonClassName="h-full"
+                noChevron
+                tabIndex={getIndex("network")}
+              >
+                {NETWORK_CHOICES.map((network) => (
+                  <CustomSelect.Option key={network.key} value={network.key}>
+                    <div className="flex items-start gap-2">
+                      <ProjectNetworkIcon iconKey={network.iconKey} className="h-3.5 w-3.5" />
+                      <div className="-mt-1">
+                        <p>{t(network.i18n_label)}</p>
+                        <p className="text-xs text-custom-text-400">{t(network.description)}</p>
+                      </div>
+                    </div>
+                  </CustomSelect.Option>
+                ))}
+              </CustomSelect>
+            </div>
+          );
+        }}
+      />
+      <Controller
+        name="project_lead"
+        control={control}
+        render={({ field: { value, onChange } }) => {
+          if (value === undefined || value === null || typeof value === "string")
+            return (
+              <div className="flex-shrink-0 h-7" tabIndex={getIndex("lead")}>
+                <MemberDropdown
+                  value={value ?? null}
+                  onChange={(lead) => onChange(lead === value ? null : lead)}
+                  placeholder={t("lead")}
+                  multiple={false}
+                  buttonVariant="border-with-text"
+                  tabIndex={5}
+                />
+              </div>
+            );
+          else return <></>;
+        }}
+      />
+    </div>
+  );
+};
+
+export default ProjectAttributes;