66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
interface ReplyFormProps {
|
|
topicId: number;
|
|
isLocked: boolean;
|
|
}
|
|
|
|
export function ReplyForm({ topicId, isLocked }: ReplyFormProps) {
|
|
const [submitting, setSubmitting] = useState(false);
|
|
|
|
if (isLocked) {
|
|
return (
|
|
<div className="mt-8 text-center py-6 rounded-xl border border-border/40 bg-muted/20">
|
|
<p className="text-sm text-muted-foreground">此话题已锁定，无法回复</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="mt-8">
|
|
<form
|
|
onSubmit={async (e) => {
|
|
e.preventDefault();
|
|
setSubmitting(true);
|
|
const formData = new FormData(e.currentTarget);
|
|
const content = formData.get("content") as string;
|
|
if (!content.trim()) {
|
|
setSubmitting(false);
|
|
return;
|
|
}
|
|
const res = await fetch(`/api/forum/topics/${topicId}/posts`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ content }),
|
|
});
|
|
setSubmitting(false);
|
|
if (res.ok) {
|
|
window.location.reload();
|
|
}
|
|
}}
|
|
className="rounded-xl border border-border/50 bg-white p-5 shadow-[0_1px_2px_rgba(0,0,0,0.04)]"
|
|
>
|
|
<h3 className="text-sm font-semibold mb-3">发表回复</h3>
|
|
<textarea
|
|
name="content"
|
|
placeholder="写下你的回复..."
|
|
rows={4}
|
|
maxLength={5000}
|
|
className="w-full resize-none rounded-lg border border-border/60 bg-white px-3 py-2 text-sm focus:outline-none focus:border-primary/50 focus:ring-2 focus:ring-primary/15 transition-colors placeholder:text-muted-foreground/40 mb-3"
|
|
disabled={submitting}
|
|
/>
|
|
<div className="flex justify-end">
|
|
<button
|
|
type="submit"
|
|
disabled={submitting}
|
|
className="rounded-lg bg-primary text-white text-sm px-5 py-2 hover:bg-primary/90 transition-colors shadow-sm shadow-primary/20 disabled:opacity-50"
|
|
>
|
|
{submitting ? "提交中..." : "发表回复"}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
} |