feat(workspaces): add CreateWorkspaceForm component for workspace creation

src/features/workspaces/components/create-workspace-form.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { z } from "zod";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { useForm } from "react-hook-form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { createWorkspaceSchema } from "../schemas";
+import { Separator } from "@/components/ui/separator";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useCreateWorkspace } from "../api/use-create-workspace";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+interface CreateWorkspaceFormProps {
+  onCancel?: () => void;
+}
+
+export const CreateWorkspaceForm = ({ onCancel }: CreateWorkspaceFormProps) => {
+  const { mutate, isPending } = useCreateWorkspace();
+
+  const form = useForm<z.infer<typeof createWorkspaceSchema>>({
+    resolver: zodResolver(createWorkspaceSchema),
+    defaultValues: {
+      name: "",
+    },
+  });
+
+  const onSubmit = (values: z.infer<typeof createWorkspaceSchema>) => {
+    mutate({ json: values });
+  };
+
+  return (
+    <Card className="h-full w-full">
+      <CardHeader className="flex p-7">
+        <CardTitle className="text-xl font-bold">
+          Create a new workspace
+        </CardTitle>
+      </CardHeader>
+      <div className="px-7">
+        <Separator />
+      </div>
+      <CardContent className="p-7">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="flex flex-col gap-y-4">
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Workspace Name</FormLabel>
+                    <FormControl>
+                      <Input {...field} placeholder="Enter workspace name" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <Separator className="my-7" />
+            <div className="flex items-center justify-between">
+              <Button
+                type="button"
+                size="lg"
+                variant="secondary"
+                onClick={onCancel}
+                disabled={isPending}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" size="lg" disabled={isPending}>
+                Create
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </CardContent>
+      <CardContent className="p-7"></CardContent>
+    </Card>
+  );
+};