Switch to use Command component

Author: brendan-kellam

packages/web/package.json

@@ -70,6 +70,7 @@
     "client-only": "^0.0.1",
     "clsx": "^2.1.1",
     "cm6-graphql": "^0.2.0",
+    "cmdk": "1.0.0",
     "codemirror": "^5.65.3",
     "codemirror-lang-brainfuck": "^0.1.0",
     "codemirror-lang-elixir": "^4.0.0",

packages/web/src/app/components/orgSelector/orgCreationDialog.tsx

@@ -0,0 +1,80 @@
+'use client';
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PlusCircledIcon } from "@radix-ui/react-icons";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+const formSchema = z.object({
+    name: z.string().min(2).max(40),
+});
+
+
+interface OrgCreationDialogProps {
+    onSubmit: (data: z.infer<typeof formSchema>) => void;
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+}
+
+export const OrgCreationDialog = ({
+    onSubmit,
+    isOpen,
+    onOpenChange,
+}: OrgCreationDialogProps) => {
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            name: "",
+        },
+    });
+
+    return (
+        <Dialog
+            open={isOpen}
+            onOpenChange={onOpenChange}
+        >
+            <DialogTrigger asChild>
+                <DropdownMenuItem
+                    onSelect={(e) => e.preventDefault()}
+                >
+                    <Button
+                        variant="ghost"
+                        size="default"
+                        className="w-full justify-start gap-1.5 p-0"
+                    >
+                        <PlusCircledIcon className="h-5 w-5 text-muted-foreground" />
+                        Create organization
+                    </Button>
+                </DropdownMenuItem>
+            </DialogTrigger>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Create an organization</DialogTitle>
+                    <DialogDescription>Collaborate with</DialogDescription>
+                </DialogHeader>
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmit)}>
+                        <FormField
+                            control={form.control}
+                            name="name"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Organization name</FormLabel>
+                                    <FormControl>
+                                        <Input {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <Button className="mt-5" type="submit">Submit</Button>
+                    </form>
+                </Form>
+            </DialogContent>
+        </Dialog>
+    )
+}