All checks were successful
Vercel Production Deployment / Deploy-Production (push) Successful in 1m7s
43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
"use client";
|
|
import { Input } from "~/components/ui/input";
|
|
import SubmitButton from "../SubmitButton";
|
|
import { useActionState } from "react";
|
|
import { addRegion } from "~/server/actions/addRegion";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "~/components/ui/select";
|
|
import { useFormState } from "react-dom";
|
|
|
|
interface Country {
|
|
id: string;
|
|
name: string;
|
|
}
|
|
|
|
export default function CreateRegionForm(props: { countries: Country[] }) {
|
|
const [state, formAction] = useFormState(addRegion, null);
|
|
const { countries } = props;
|
|
return (
|
|
<form action={formAction}>
|
|
<Input name="name" />
|
|
<Select name="country">
|
|
<SelectTrigger className="w-[180px]">
|
|
<SelectValue placeholder="Country" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{countries.map((country) => (
|
|
<SelectItem key={country.id} value={country.id}>
|
|
{country.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<SubmitButton text={"Region"} />
|
|
<span>{state?.message}</span>
|
|
</form>
|
|
);
|
|
}
|