feat: monorepo

apps/web/src/components/NewWorkspaceForm.tsx

@@ -0,0 +1,82 @@
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { HiXMark } from "react-icons/hi2";
+
+import Button from "~/components/Button";
+import Input from "~/components/Input";
+import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
+import { useWorkspace } from "~/providers/workspace";
+import { api } from "~/utils/api";
+
+interface FormValues {
+  name: string;
+}
+
+export function NewWorkspaceForm() {
+  const { closeModal } = useModal();
+  const { showPopup } = usePopup();
+  const { switchWorkspace } = useWorkspace();
+  const { register, handleSubmit } = useForm<FormValues>();
+
+  const createWorkspace = api.workspace.create.useMutation({
+    onSuccess: (values) => {
+      if (values?.publicId && values.name) {
+        switchWorkspace({ publicId: values.publicId, name: values.name });
+        closeModal();
+      }
+    },
+    onError: () => {
+      showPopup({
+        header: "Unable to create workspace",
+        message: "Please try again later, or contact customer support.",
+      });
+    },
+  });
+
+  useEffect(() => {
+    const nameElement: HTMLElement | null =
+      document?.querySelector<HTMLElement>("#workspace-name");
+    if (nameElement) nameElement.focus();
+  }, []);
+
+  const onSubmit = (values: FormValues) => {
+    createWorkspace.mutate({
+      name: values.name,
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="px-5 pt-5">
+        <div className="flex w-full items-center justify-between pb-4">
+          <h2 className="text-sm font-bold text-neutral-900 dark:text-dark-1000">
+            New workspace
+          </h2>
+          <button
+            className="rounded p-1 hover:bg-light-200 focus:outline-none dark:hover:bg-dark-300"
+            onClick={(e) => {
+              e.preventDefault();
+              closeModal();
+            }}
+          >
+            <HiXMark size={18} className="text-light-900 dark:text-dark-900" />
+          </button>
+        </div>
+
+        <Input
+          id="workspace-name"
+          placeholder="Workspace name"
+          {...register("name")}
+        />
+      </div>
+      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+        <div>
+          <Button type="submit" isLoading={createWorkspace.isPending}>
+            Create workspace
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}