Survey Audience Selector - Copy this React, Tailwind Component to your project

import React, { useState } from "react"; import { FaPlus, FaDatabase, FaFileUpload, FaSave, FaPaperPlane, } from "react-icons/fa"; const SurveyAudienceSelector = () => { const [email, setEmail] = useState(""); const [name, setName] = useState(""); const [users, setUsers] = useState([]); const [selectedUsers, setSelectedUsers] = useState([]); const [error, setError] = useState(""); const addUser = () => { if (!email || !name) { setError("Please fill in both email and name fields."); return; } if (!/^\S+@\S+\.\S+$/.test(email)) { setError("Please enter a valid email address."); return; } setUsers([...users, { email, name }]); setEmail(""); setName(""); setError(""); }; const toggleUserSelection = (email) => { setSelectedUsers( selectedUsers.includes(email) ? selectedUsers.filter((e) => e !== email) : [...selectedUsers, email] ); }; return ( <> <div className="flex flex-col md:flex-row p-8 bg-gradient-to-r from-blue-50 via-blue-100 to-blue-200 min-h-screen"> {/* Left Panel */} <div className="w-full md:w-1/2 bg-white rounded-lg shadow-lg p-8 mb-6 md:mb-0 md:mr-6"> <h2 className="text-3xl font-extrabold text-gray-900 mb-4"> Add Users </h2> <div className="mb-6"> <label htmlFor="email" className="block text-lg font-medium text-gray-800 mb-2" > Email </label> <input type="email" id="email" value={email} onChange={(e) => setEmail(e.target.value)} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Enter email" /> </div> <div className="mb-6"> <label htmlFor="name" className="block text-lg font-medium text-gray-800 mb-2" > Name </label> <input type="text" id="name" value={name} onChange={(e) => setName(e.target.value)} className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Enter name" /> </div> {error && <p className="text-red-600 text-sm mb-4">{error}</p>} <button onClick={addUser} className="flex items-center justify-center w-full px-4 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 transition-all duration-300" > <FaPlus className="mr-2" /> Add User </button> {/* <div className="mt-8"> <h3 className="text-2xl font-semibold text-gray-900 mb-3">User List</h3> <div className="max-h-60 overflow-y-auto"> {users.map((user, index) => ( <div key={index} className="flex items-center mb-3 bg-gray-50 p-3 rounded-md shadow-sm"> <input type="checkbox" id={`user-${index}`} checked={selectedUsers.includes(user.email)} onChange={() => toggleUserSelection(user.email)} className="mr-3 h-5 w-5 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" /> <label htmlFor={`user-${index}`} className="text-gray-800 text-lg"> {user.name} ({user.email}) </label> </div> ))} </div> </div> */} </div> {/* Right Panel */} <div className="w-full md:w-1/2 bg-white rounded-lg shadow-lg p-8"> <h2 className="text-3xl font-extrabold text-gray-900 mb-4"> Audience Selection </h2> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8"> <button className="flex items-center justify-center px-4 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 transition-all duration-300"> <FaDatabase className="mr-2" /> Select from Database </button> <button className="flex items-center justify-center px-4 py-3 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 transition-all duration-300"> <FaFileUpload className="mr-2" /> Upload File </button> <button className="flex items-center justify-center px-4 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 transition-all duration-300"> <FaPaperPlane className="mr-2" /> Save and Send Survey </button> </div> {/* <div> <h3 className="text-2xl font-semibold text-gray-900 mb-3">Selected Audience</h3> <div className="max-h-60 overflow-y-auto"> {selectedUsers.map((email, index) => ( <div key={index} className="flex items-center mb-3 bg-gray-50 p-3 rounded-md shadow-sm"> <input type="checkbox" id={`selected-${index}`} checked onChange={() => toggleUserSelection(email)} className="mr-3 h-5 w-5 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" /> <label htmlFor={`selected-${index}`} className="text-gray-800 text-lg"> {email} </label> </div> ))} </div> </div> */} </div> </div> {/* Bottom div to show the list of added users from file upload, "Add Users," or "Select from Database," showing both name and email, with the username on line 1 and email on line 2 */} <div className="w-full bg-white rounded-lg shadow-lg p-8 mb-6 md:mb-0 md:mr-6"> <h3 className="text-2xl font-semibold text-gray-900 mb-4"> Added Audience </h3> {users.length === 0 ? ( <p className="text-gray-600">No users added yet.</p> ) : ( <div className="max-h-60 overflow-y-auto"> {users.map((user, index) => ( <div key={index} className="flex flex-col p-4 mb-3 bg-gray-50 rounded-md shadow-sm" > <p className="text-gray-900 font-semibold">{user.name}</p> <p className="text-gray-600">{user.email}</p> </div> ))} </div> )} </div> </> ); }; export default SurveyAudienceSelector;