1 reply
1 recast
7 reactions
1 reply
0 recast
2 reactions
// ReplyThread.tsx
import React, { useState } from 'react';
type Reply = {
id: number;
author: string;
content: string;
timestamp: string;
};
type ReplyThreadProps = {
initialReplies?: Reply[];
onSubmitReply?: (content: string) => Promise<Reply>;
};
export default function ReplyThread({ initialReplies = [], onSubmitReply }: ReplyThreadProps) {
const [replies, setReplies] = useState<Reply[]>(initialReplies);
const [newReply, setNewReply] = useState('');
const [loading, setLoading] = useState(false);
const handleSubmit = async () => {
if (!newReply.trim()) return;
setLoading(true);
const reply: Reply = onSubmitReply
? await onSubmitReply(newReply)
: {
id: replies.length + 1,
author: 'You',
content: newReply,
timestamp: new Date().toISOString(),
};
setReplies([...replies, reply]);
setNewReply('');
setLoading(false);
};
return (
<div className="space-y-4 p-4 rounded-xl bg-gray-50 shadow-md">
<div className="space-y-2">
{replies.map((reply) => (
<div key={reply.id} className="border border-gray-200 rounded-md p-3 bg-white">
<div className="text-sm text-gray-500">{reply.author} · {new Date(reply.timestamp).toLocaleString()}</div>
<div className="text-gray-800 mt-1">{reply.content}</div>
</div>
))}
</div>
<div className="mt-4">
<textarea
className="w-full p-2 border rounded-md"
rows={3}
value={newReply}
onChange={(e) => setNewReply(e.target.value)}
placeholder="Write a reply..."
/>
<button
className="mt-2 px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50"
onClick={handleSubmit}
disabled={loading}
>
{loading ? 'Replying…' : 'Reply'}
</button>
</div>
</div>
);
} 1 reply
0 recast
1 reaction
1 reply
0 recast
1 reaction
0 reply
0 recast
1 reaction