shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: tweak form spacing and refactor to react hook form

Browse Source
This commit is contained in:
Henry
2024-08-13 23:19:38 +01:00
parent 04c6576228
commit 918acf8b99
1 changed files with 34 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/components/NewWorkspaceForm.tsx
View File

@@ -1,12 +1,9 @@
import { useEffect } from "react";
import { api } from "~/utils/api";
import { HiXMark } from "react-icons/hi2";
import { useModal } from "~/providers/modal";
import { useWorkspace } from "~/providers/workspace";
import { Formik, Form, Field } from "formik";
import { useForm } from "react-hook-form";
interface FormValues {
name: string;
@@ -15,6 +12,11 @@ interface FormValues {
export function NewWorkspaceForm() {
const { closeModal } = useModal();
const { switchWorkspace } = useWorkspace();
const {
register,
handleSubmit,
formState: { errors },
} = useForm<FormValues>();
const createWorkspace = api.workspace.create.useMutation({
onSuccess: (values) => {
@@ -35,8 +37,14 @@ export function NewWorkspaceForm() {
if (nameElement) nameElement.focus();
}, []);
const onSubmit = (values: FormValues) => {
createWorkspace.mutate({
name: values.name,
});
};
return (
<>
<div className="p-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
@@ -49,38 +57,27 @@ export function NewWorkspaceForm() {
</button>
</div>
<Formik
initialValues={{
name: "",
}}
onSubmit={(values: FormValues) => {
createWorkspace.mutate({
name: values.name,
});
}}
>
<Form>
<label
htmlFor="workspace-name"
className="block pb-2 text-sm font-normal leading-6 text-neutral-900 dark:text-dark-1000"
<form onSubmit={handleSubmit(onSubmit)}>
<label
htmlFor="workspace-name"
className="block pb-2 text-sm font-normal leading-6 text-neutral-900 dark:text-dark-1000"
>
Name
</label>
<input
id="workspace-name"
{...register("name", { required: true })}
className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 dark:text-dark-1000 dark:ring-dark-700 dark: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-light-1000 px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
>
Name
</label>
<Field
id="workspace-name"
name="name"
className="block w-full rounded-md border-0 bg-dark-300 bg-white/5 py-1.5 text-neutral-900 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 dark:text-dark-1000 dark:ring-dark-700 dark: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-light-1000 px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
>
Create workspace
</button>
</div>
</Form>
</Formik>
</>
Create workspace
</button>
</div>
</form>
</div>
);
}