@ieltsrealtest/ui
Version:
Reusable UI components for IELTS Real Test platform, built with React and TypeScript.
43 lines (42 loc) • 2.15 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Image from "next/image";
import { Send } from "lucide-react";
import { useState } from "react";
export default function CommentInput({ userId, threadId, parentId, onSuccess, name, }) {
const [content, setContent] = useState("");
const [loading, setLoading] = useState(false);
const handleSubmit = async () => {
if (!content.trim())
return;
setLoading(true);
try {
const res = await fetch(`https://api.youready.net/ielts/comment/api/discussion/`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
user_id: userId,
content: content,
thread_id: threadId,
parent_id: parentId,
page: "reading",
}),
});
const json = await res.json();
if (json.success) {
setContent("");
onSuccess();
}
else {
alert("❌ Error: " + json.message);
}
}
catch (e) {
alert("❌ Failed to send comment");
}
finally {
setLoading(false);
}
};
return (_jsxs("div", { className: "flex items-center mt-3 gap-3 sm:gap-4 md:gap-6", children: [_jsx(Image, { src: "https://ieltsrealtest.s3.us-east-1.amazonaws.com/public/common/avt.png", alt: "avatar", width: 40, height: 40, className: "rounded-full object-cover" }), _jsx("input", { type: "text", placeholder: "Write a comment...", value: content, onChange: (e) => setContent(e.target.value), className: "flex-1 h-8 border rounded px-2 text-sm sm:h-10 sm:px-2 md:h-12 md:px-6 lg:h-10 lg:px-3" }), _jsxs("button", { onClick: handleSubmit, disabled: loading, className: "bg-[#DA1E37] text-white px-3 py-1 rounded flex items-center gap-1 text-sm sm:text-base sm:px-4 sm:py-2 md:px-5 md:py-3 lg:px-3 lg:py-2", children: [loading ? "..." : "Send", " ", _jsx(Send, { width: 16, height: 16 })] })] }));
}