Bulk Whats App Messaging U I - Copy this React, Tailwind Component to your project

Create a new section that allows the user to manage message templates. The templates have an approval process, so the interface must enable the user to create new messages for approval and see the approved messages. The message templates may contain wildcard items such as {{user_name}} and {{user_email}}, for example. make sure to include that as well. here's a sample code where I tried to implement this: import React, { useState } from 'react'; import { FaCheck, FaClock, FaEdit, FaTrash, FaFileAlt } from 'react-icons/fa'; const MessageTemplateManagement = () => { const [templates, setTemplates] = useState([ { id: 1, name: 'Welcome Message', content: 'Hello {{user_name}}, welcome to our service!', status: 'approved' }, { id: 2, name: 'Promo Alert', content: 'Hi {{user_name}}, check out our latest offer at {{promo_link}}', status: 'pending' }, ]); const [newTemplate, setNewTemplate] = useState({ name: '', content: '' }); const handleInputChange = (e) => { const { name, value } = e.target; setNewTemplate({ ...newTemplate, [name]: value }); }; const handleSubmit = (e) => { e.preventDefault(); const newId = templates.length > 0 ? Math.max(...templates.map(t => t.id)) + 1 : 1; setTemplates([...templates, { ...newTemplate, id: newId, status: 'pending' }]); setNewTemplate({ name: '', content: '' }); }; const handleDelete = (id) => { setTemplates(templates.filter(template => template.id !== id)); }; return ( <div className="bg-white p-6 rounded-lg shadow-md"> <h2 className="text-2xl font-bold text-gray-800 mb-6">Message Templates</h2> <form onSubmit={handleSubmit} className="mb-8"> <input type="text" name="name" value={newTemplate.name} onChange={handleInputChange} className="mb-4 w-full rounded-md border-gray-300" placeholder="Template Name" required /> <textarea name="content" value={newTemplate.content} onChange={handleInputChange} className="mb-4 w-full rounded-md border-gray-300" rows="4" placeholder="Template Content (Use {{user_name}}, {{user_email}}, etc.)" required ></textarea> <button type="submit" className="bg-blue-600 text-white py-2 px-4 rounded-md">Submit for Approval</button> </form> <div> <h3 className="text-xl font-semibold text-gray-700 mb-4">Existing Templates</h3> <div className="space-y-4"> {templates.map(template => ( <div key={template.id} className="border border-gray-200 p-4 rounded-md"> <div className="flex justify-between items-center mb-2"> <h4 className="text-lg font-medium text-gray-800">{template.name}</h4> <div className="flex items-center space-x-2"> {template.status === 'approved' ? ( <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> <FaCheck className="mr-1" /> Approved </span> ) : ( <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800"> <FaClock className="mr-1" /> Pending </span> )} <button className="text-blue-600 hover:text-blue-800"><FaEdit /></button> <button className="text-red-600 hover:text-red-800" onClick={() => handleDelete(template.id)}><FaTrash /></button> </div> </div> <p className="text-gray-600">{template.content}</p> </div> ))} </div> </div> </div> ); }; // Additions to BulkWhatsAppMessagingDashboard <NavItem icon={<FaFileAlt className="text-xl" />} text="Message Templates" /> case 'Message Templates': return <MessageTemplateManagement />;