"use client";
import React, { useState } from "react";
import Wysiwyg from "@/components/wysiwyg";
const ContentForm = () => {
const [title, setTitle] = useState("");
const [content, setContent] = useState("");
const [feature, setFeature] = useState("");
const [cleanedContent, setCleanedContent] = useState("");
const [cleanedFeature, setCleanedFeature] = useState("");
const [successMessage, setSuccessMessage] = useState("");
const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setTitle(event.target.value);
};
const handleContentChange = (text: string, cleanedText: string) => {
setContent(text);
setCleanedContent(cleanedText);
};
const handleFeatureChange = (text: string, cleanedText: string) => {
setFeature(text);
setCleanedFeature(cleanedText);
};
const handleSubmit = async () => {
try {
const response = await fetch("http://localhost:5000/api/content", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
title,
content: cleanedContent,
feature: cleanedFeature,
}),
});
if (response.ok) {
setSuccessMessage("Content successfully submitted!");
setTimeout(() => {
window.location.reload();
}, 1000);
} else {
console.error("Failed to add content");
}
} catch (error) {
console.error("Error adding content:", error);
}
};
return (
<div className="min-h-screen bg-gray-900 p-8">
<div className="max-w-3xl mx-auto bg-gray-800 p-8 rounded-lg shadow-xl">
<h1 className="text-2xl font-bold mb-4 text-white">Add New Content</h1>
{/* title */}
<div className="mb-6">
<label className="block mb-2 font-semibold text-white">Title:</label>
<input
type="text"
className="border rounded w-full p-2"
value={title}
onChange={handleTitleChange}
/>
</div>
{/* content */}
<div className="mb-6">
<label className="block mb-2 font-semibold text-white">
Content:
</label>
<Wysiwyg
onContentChange={handleContentChange}
initialValue={content}
/>
</div>
{/* feature */}
<div className="mb-6">
<label className="block mb-2 font-semibold text-white">
Feature:
</label>
<Wysiwyg
onContentChange={handleFeatureChange}
initialValue={feature}
/>
</div>
<div className="flex justify-end">
<button
className="mb-6 bg-emerald-500 text-white px-4 py-2 rounded hover:bg-emerald-600"
onClick={handleSubmit}
>
Submit
</button>
</div>
{successMessage && (
<div className="bg-green-200 text-green-700 p-2 mb-4 rounded-md">
{successMessage}
</div>
)}
</div>
</div>
);
};
export default ContentForm;