refactor menu

app/workspace-new/page.tsx

@@ -0,0 +1,13 @@
+import { WorkspaceForm } from "@/components/menu/new-workspace-form";
+import { getTemplateNames } from "@/data/template";
+
+export default async function Page() {
+  const templateOptions = await getTemplateNames();
+  return (
+    <main>
+      <div className="h-screen flex items-center justify-center">
+        <WorkspaceForm templateOptions={templateOptions} />
+      </div>
+    </main>
+  );
+}

app/workspace-open/page.tsx

@@ -0,0 +1,11 @@
+import { OpenWorkspaceForm } from "@/components/menu/open-workspace-form";
+
+export default async function Page() {
+  return (
+    <main>
+      <div className="h-screen flex items-center justify-center">
+        <OpenWorkspaceForm />
+      </div>
+    </main>
+  );
+}

components/menu/index.tsx

@@ -6,28 +6,15 @@ import {
 } from "@/components/ui/menubar";
 import { ModeToggle } from "@/components/menu/mode-toggle";
 import Modal from "@/components/modal";
-import { WorkspaceForm } from "@/components/menu/new-workspace-form";
 import { getTemplateNames } from "@/data/template";
-import { OpenWorkspaceForm } from "./open-workspace-form";
+import NewMenu from "./new";
+import OpenMenu from "./open";
 
 export async function MenubarComponent() {
-  const templateOptions = await getTemplateNames();
   return (
     <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger>
-          <Modal trigger={<span>New</span>} title="New Workspace">
-            <WorkspaceForm templateOptions={templateOptions} />
-          </Modal>
-        </MenubarTrigger>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>
-          <Modal trigger={<span>Open</span>} title="Open Workspace">
-            <OpenWorkspaceForm />
-          </Modal>
-        </MenubarTrigger>
-      </MenubarMenu>
+      <NewMenu />
+      <OpenMenu />
       <MenubarMenu>
         <MenubarTrigger>Theme</MenubarTrigger>
         <MenubarContent>

components/menu/new-workspace-form.tsx

@@ -75,7 +75,10 @@ export function WorkspaceForm({
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="w-[800px] space-y-6"
+      >
         <FormField
           control={form.control}
           name="name"

components/menu/new.tsx

@@ -0,0 +1,20 @@
+import {
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+} from "@/components/ui/menubar";
+import Link from "next/link";
+
+export default async function NewMenu() {
+  return (
+    <MenubarMenu>
+      <MenubarTrigger>New</MenubarTrigger>
+      <MenubarContent>
+        <MenubarItem asChild>
+          <Link href="/workspace-new">Workspace</Link>
+        </MenubarItem>
+      </MenubarContent>
+    </MenubarMenu>
+  );
+}

components/menu/open-workspace-form.tsx

@@ -73,7 +73,7 @@ export function OpenWorkspaceForm() {
                   defaultValue={field.value}
                 >
                   <SelectTrigger className="w-[180px]">
-                    <SelectValue placeholder="Select a template" />
+                    <SelectValue placeholder="Select a workspace" />
                   </SelectTrigger>
                   <SelectContent>
                     <SelectGroup>

components/menu/open.tsx

@@ -0,0 +1,20 @@
+import {
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+} from "@/components/ui/menubar";
+import Link from "next/link";
+
+export default async function OpenMenu() {
+  return (
+    <MenubarMenu>
+      <MenubarTrigger>Open</MenubarTrigger>
+      <MenubarContent>
+        <MenubarItem asChild>
+          <Link href="/workspace-open">Workspace</Link>
+        </MenubarItem>
+      </MenubarContent>
+    </MenubarMenu>
+  );
+}