feat: create workspace

src/app/components/NewWorkspaceForm.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { api } from "~/trpc/react";
+
+import { HiXMark } from "react-icons/hi2";
+
+import { useModal } from "~/app/providers/modal";
+import { useWorkspace } from "~/app/providers/workspace";
+
+import { Formik, Form, Field } from "formik";
+
+interface FormValues {
+  name: string;
+}
+
+export function NewWorkspaceForm() {
+  const { closeModal } = useModal();
+  const { switchWorkspace } = useWorkspace();
+
+  const createWorkspace = api.workspace.create.useMutation({
+    onSuccess: (values) => {
+      try {
+        if (values?.publicId) {
+          switchWorkspace({ publicId: values.publicId, name: values.name });
+          closeModal();
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+  });
+
+  return (
+    <>
+      <div className="flex w-full justify-between pb-4">
+        <h2 className="text-sm font-bold text-dark-1000">New workspace</h2>
+        <button
+          className="rounded p-1 hover:bg-dark-300 focus:outline-none"
+          onClick={() => closeModal()}
+        >
+          <HiXMark size={18} className="text-dark-900" />
+        </button>
+      </div>
+
+      <Formik
+        initialValues={{
+          name: "",
+        }}
+        onSubmit={(values: FormValues) => {
+          createWorkspace.mutate({
+            name: values.name,
+          });
+        }}
+      >
+        <Form>
+          <label
+            htmlFor="name"
+            className="block pb-2 text-sm font-normal leading-6 text-dark-1000"
+          >
+            Name
+          </label>
+          <Field
+            id="name"
+            name="name"
+            className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-dark-1000 shadow-sm ring-1 ring-inset ring-dark-700 focus:ring-2 focus:ring-inset focus:ring-dark-700 sm:text-sm sm:leading-6"
+          />
+          <div className="mt-5 sm:mt-6">
+            <button
+              type="submit"
+              className="inline-flex w-full justify-center rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 shadow-sm focus-visible:outline-none"
+            >
+              Create workspace
+            </button>
+          </div>
+        </Form>
+      </Formik>
+    </>
+  );
+}

src/app/components/SideNavigation.tsx

@@ -33,23 +33,28 @@ export default function SideNavigation({ user }: SideNavigationProps) {
   ];
 
   return (
-    <nav className="flex w-72 flex-col justify-between border-r border-dark-600 px-3 pb-3 pt-5">
-      <div>
-        <WorkspaceMenu />
-        <ul role="list" className="space-y-1">
-          {navigation.map((item) => (
-            <li key={item.name}>
-              <ReactiveButton
-                href={item.href}
-                current={pathname.includes(item.href)}
-                name={item.name}
-                json={item.icon}
-              />
-            </li>
-          ))}
-        </ul>
-      </div>
-      <UserMenu email={user?.email ?? ""} imageUrl={user?.image ?? undefined} />
-    </nav>
+    <>
+      <nav className="flex w-72 flex-col justify-between border-r border-dark-600 px-3 pb-3 pt-5">
+        <div>
+          <WorkspaceMenu />
+          <ul role="list" className="space-y-1">
+            {navigation.map((item) => (
+              <li key={item.name}>
+                <ReactiveButton
+                  href={item.href}
+                  current={pathname.includes(item.href)}
+                  name={item.name}
+                  json={item.icon}
+                />
+              </li>
+            ))}
+          </ul>
+        </div>
+        <UserMenu
+          email={user?.email ?? ""}
+          imageUrl={user?.image ?? undefined}
+        />
+      </nav>
+    </>
   );
 }

src/app/components/WorkspaceMenu.tsx

@@ -3,10 +3,14 @@
 import { Fragment } from "react";
 import { Menu, Transition } from "@headlessui/react";
 
+import { useModal } from "~/app/providers/modal";
 import { useWorkspace } from "~/app/providers/workspace";
 
-export default function UserMenu() {
+import { HiCheck } from "react-icons/hi2";
+
+export default function WorkspaceMenu() {
   const { workspace, availableWorkspaces, switchWorkspace } = useWorkspace();
+  const { openModal } = useModal();
 
   return (
     <Menu as="div" className="relative inline-block w-full pb-3 text-left">
@@ -32,26 +36,45 @@ export default function UserMenu() {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute left-0 z-10 w-full origin-top-left rounded-md border border-dark-500 bg-dark-300 p-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-          {availableWorkspaces.map((availableWorkspace) => (
-            <div key={availableWorkspace.publicId} className="flex">
-              <Menu.Item>
-                <button
-                  onClick={() => switchWorkspace(availableWorkspace)}
-                  className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-sm text-dark-1000 hover:bg-dark-400"
-                >
-                  <span className="inline-flex h-5 w-5 items-center justify-center rounded-[5px] bg-indigo-700">
-                    <span className="text-xs font-medium leading-none text-white">
-                      {availableWorkspace?.name.charAt(0).toUpperCase()}
-                    </span>
-                  </span>
-                  <span className="ml-2 text-xs font-medium text-dark-1000">
-                    {availableWorkspace?.name}
-                  </span>
-                </button>
-              </Menu.Item>
-            </div>
-          ))}
+        <Menu.Items className="absolute left-0 z-10 w-full origin-top-left rounded-md border border-dark-500 bg-dark-300 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <div className="p-1">
+            {availableWorkspaces.map((availableWorkspace) => (
+              <div key={availableWorkspace.publicId} className="flex">
+                <Menu.Item>
+                  <button
+                    onClick={() => switchWorkspace(availableWorkspace)}
+                    className="flex w-full items-center justify-between rounded-[5px] px-3 py-2 text-left text-sm text-dark-1000 hover:bg-dark-400"
+                  >
+                    <div>
+                      <span className="inline-flex h-5 w-5 items-center justify-center rounded-[5px] bg-indigo-700">
+                        <span className="text-xs font-medium leading-none text-white">
+                          {availableWorkspace?.name.charAt(0).toUpperCase()}
+                        </span>
+                      </span>
+                      <span className="ml-2 text-xs font-medium text-dark-1000">
+                        {availableWorkspace?.name}
+                      </span>
+                    </div>
+                    {workspace?.name === availableWorkspace?.name && (
+                      <span>
+                        <HiCheck className="h-4 w-4" aria-hidden="true" />
+                      </span>
+                    )}
+                  </button>
+                </Menu.Item>
+              </div>
+            ))}
+          </div>
+          <div className="border-t-[1px] border-dark-500 p-1">
+            <Menu.Item>
+              <button
+                onClick={() => openModal("NEW_WORKSPACE")}
+                className="flex w-full items-center justify-between rounded-[5px] px-3 py-2 text-left text-xs text-dark-1000 hover:bg-dark-400"
+              >
+                Create workspace
+              </button>
+            </Menu.Item>
+          </div>
         </Menu.Items>
       </Transition>
     </Menu>