ChrQR
54454aad6d
All checks were successful
Vercel Preview Deployment / Deploy-Preview (push) Successful in 1m18s
50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
"use client";
|
|
import { Input } from "~/components/ui/input";
|
|
import { addCountry } from "~/server/actions/addCountry";
|
|
import SubmitButton from "../SubmitButton";
|
|
import { useFormState } from "react-dom";
|
|
import { useEffect, useRef } from "react";
|
|
import clsx from "clsx";
|
|
import { Check, CircleX } from "lucide-react";
|
|
|
|
export default function CreateCountryForm() {
|
|
const [formState, formAction] = useFormState(addCountry, {
|
|
message: "",
|
|
errors: undefined,
|
|
fieldValues: {
|
|
name: "",
|
|
},
|
|
});
|
|
const formRef = useRef<HTMLFormElement>(null);
|
|
useEffect(() => {
|
|
if (formState.message === "success") {
|
|
formRef.current?.reset();
|
|
}
|
|
}, [formState.message]);
|
|
return (
|
|
<form ref={formRef} action={formAction} className="flex flex-col gap-2">
|
|
<div className="flex max-w-3xl items-center gap-2">
|
|
<Input
|
|
name="name"
|
|
id="name"
|
|
className={clsx({ "border-red-500": formState.errors?.name })}
|
|
/>
|
|
{formState.message !== "" && !formState.errors?.name ? (
|
|
<Check className="text-green-500" />
|
|
) : (
|
|
""
|
|
)}
|
|
{formState.errors?.name ? (
|
|
<div className="flex min-w-96 items-center gap-1 text-red-500">
|
|
<CircleX />
|
|
<span className="text-sm">{formState.errors?.name}</span>
|
|
</div>
|
|
) : (
|
|
""
|
|
)}
|
|
</div>
|
|
<SubmitButton text={"Country"} />
|
|
</form>
|
|
);
|
|
}
|