48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useActionState } from "react";
|
|
import { sendTestAction, type SendTestResult } from "@/actions/groups";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Label } from "@/components/ui/label";
|
|
|
|
const initial: SendTestResult | null = null;
|
|
|
|
export function SendTestForm({ groupId }: { groupId: string }) {
|
|
const [state, formAction, isPending] = useActionState(sendTestAction, initial);
|
|
return (
|
|
<form action={formAction} className="space-y-3">
|
|
<input type="hidden" name="groupId" value={groupId} />
|
|
<div>
|
|
<Label htmlFor="text" className="text-sm">
|
|
Message
|
|
</Label>
|
|
<Textarea
|
|
id="text"
|
|
name="text"
|
|
placeholder="What should I send to this group?"
|
|
rows={4}
|
|
required
|
|
maxLength={4000}
|
|
className="mt-1"
|
|
/>
|
|
</div>
|
|
{state?.ok === false && (
|
|
<p className="text-sm text-destructive" role="alert">
|
|
{state.error}
|
|
</p>
|
|
)}
|
|
{state?.ok === true && (
|
|
<p className="text-sm text-green-600 dark:text-green-400" role="status">
|
|
{state.message}
|
|
</p>
|
|
)}
|
|
<div className="flex justify-end">
|
|
<Button type="submit" disabled={isPending}>
|
|
{isPending ? "Sending…" : "Send Test"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|