tca-admin/app/(defaults)/(blog)/create-blog/page.tsx

"use client";
import IconTrashLines from "@/components/icon/icon-trash-lines";
import React, { useState } from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";

// Custom toolbar options
const modules = {
    toolbar: {
        container: [
            [{ header: [1, 2, 3, false] }],
            ["bold", "italic", "underline", "strike"],
            [{ list: "ordered" }, { list: "bullet" }],
            ["blockquote", "code-block"],
            [{ align: [] }],
            ["link", "image", "video"],
            ["clean"],
        ],
        handlers: {
            image: function () {
                const input = document.createElement("input");
                input.setAttribute("type", "file");
                input.setAttribute("accept", "image/*");
                input.click();

                input.onchange = async () => {
                    const file = input.files?.[0];
                    if (file) {
                        const reader = new FileReader();
                        reader.onload = () => {
                            const quill = this.quill;
                            const range = quill.getSelection();
                            quill.insertEmbed(range.index, "image", reader.result);
                        };
                        reader.readAsDataURL(file);
                    }
                };
            },
        },
    },
};

const formats = [
    "header",
    "bold", "italic", "underline", "strike",
    "blockquote", "code-block",
    "list", "bullet",
    "align",
    "link", "image", "video",
];

const PostForm = () => {
    const [formData, setFormData] = useState({
        title: "",
        slug: "",
        coverImage: null as File | null,
        description: "",
    });

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value } = e.target;
        setFormData((prev) => ({
            ...prev,
            [name]: value,
        }));
    };

    const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0] || null;
        setFormData((prev) => ({
            ...prev,
            coverImage: file,
        }));
    };

    const handleRemoveImage = () => {
        setFormData((prev) => ({
            ...prev,
            coverImage: null,
        }));
    };

    const handleDescriptionChange = (value: string) => {
        setFormData((prev) => ({
            ...prev,
            description: value,
        }));
    };

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();

        const data = new FormData();
        data.append("title", formData.title);
        data.append("slug", formData.slug);
        if (formData.coverImage) {
            data.append("coverImage", formData.coverImage);
        }
        data.append("description", formData.description);

        console.log("FormData prepared:", {
            title: formData.title,
            slug: formData.slug,
            coverImage: formData.coverImage?.name,
            description: formData.description,
        });
    };

    return (
        <form
            onSubmit={handleSubmit}
            className="space-y-5 max-w-4xl mx-auto p-6 bg-white rounded shadow-md"
        >
            <h2 className="text-xl font-bold mb-4">Create Blog</h2>
            {/* Blog Title */}
            <div>
                <label className="block font-medium mb-1">Blog Title</label>
                <input
                    type="text"
                    name="title"
                    value={formData.title}
                    onChange={handleChange}
                    placeholder="Enter blog title"
                    className="w-full border rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 outline-none"
                />
            </div>

            {/* Slug */}
            <div>
                <label className="block font-medium mb-1">Slug</label>
                <input
                    type="text"
                    name="slug"
                    value={formData.slug}
                    onChange={handleChange}
                    placeholder="Enter slug (e.g. my-first-blog)"
                    className="w-full border rounded-md px-3 py-2 focus:ring-2 focus:ring-green-500 outline-none"
                />
            </div>

            {/* Cover Image Upload */}
            <div>
                <label className="block font-medium mb-1">Cover Image</label>
                <input
                    type="file"
                    accept="image/*"
                    onChange={handleImageChange}
                    className="w-full border rounded-md px-3 py-2 focus:ring-2 focus:ring-blue-500 outline-none"
                />
            </div>

            {/* Show Image Preview */}
            {formData.coverImage && (
                <div className="mt-3">
                    <p className="text-sm font-medium">Preview:</p>
                    <div className="relative inline-block mt-2">
                        <img
                            src={URL.createObjectURL(formData.coverImage)}
                            alt="Selected"
                            className="w-48 h-32 object-cover rounded border"
                        />
                        <button
                            type="button"
                            onClick={handleRemoveImage}
                            className="absolute top-1 right-1 bg-red-600 text-white text-xs px-2 py-1 rounded hover:bg-red-700"
                        >
                            <IconTrashLines className="shrink-0" />
                        </button>
                    </div>
                </div>
            )}

            {/* Description (ReactQuill) */}
            <div className="mb-5">
                <ReactQuill
                    value={formData.description}
                    onChange={handleDescriptionChange}
                    modules={modules}
                    formats={formats}
                    placeholder="Write your description..."
                    className="bg-white text-black rounded-md"
                />
            </div>

            {/* Submit Button */}
            <button
                type="submit"
                className="bg-blue-600 text-white px-6 py-2 mt-5 rounded-md hover:bg-blue-700 transition"
            >
                Submit
            </button>
        </form>
    );
};

export default PostForm;