Saleem Kanaan Decor

المشاركات

Create a post

import React, { useState } from "react"; import { motion } from "framer-motion"; // CreatePostButton.jsx // مكون React لزر "إنشاء منشور جديد" مع نافذة منبثقة (modal) بسيطة ونموذج. // - يستخدم Tailwind CSS (افتراضي) // - يستخدم Framer Motion للحركة // - سهل التخصيص: مرّر onCreate كمندوب لحفظ/إرسال البيانات export default function CreatePostButton({ onCreate = (post) => console.log(post), className = "" }) { const [open, setOpen] = useState(false); const [loading, setLoading] = useState(false); const [title, setTitle] = useState(""); const [content, setContent] = useState(""); function resetForm() { setTitle(""); setContent(""); } async function handleSubmit(e) { e.preventDefault(); setLoading(true); try { const post = { title: title.trim(), content: content.trim(), createdAt: new Date().toISOString() }; // استدعاء رد الاتصال الخارجي - افتراضيًا يطبع في الكونسول await Promise.resolve(onCreate(post)); // إغلاق النافذة بعد الإنشاء setOpen(false); resetForm(); } catch (err) { console.error("Create post failed:", err); // هنا يمكنك عرض إشعار للمستخدم } finally { setLoading(false); } } return ( <> setOpen(true)} className={inline-flex items-center gap-2 px-4 py-2 rounded-2xl shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-medium ${className}} aria-haspopup="dialog" aria-expanded={open} > إنشاء منشور جديد {/* Modal backdrop */} {open && (

(loading ? null : setOpen(false))} aria-hidden />

)} ); } // === مثال استخدام === // import CreatePostButton from './CreatePostButton'; // function App() { // function handleCreate(post) { // // هنا أضف منطق الحفظ: استدعاء API، إضافة إلى قائمة المنشورات، إرسال إلى Google Sheets ... الخ // console.log('تم إنشاء المنشور:', post); // } // // return ( //

// //

// ); // } // export default App;