Modern Footer Component - Copy this Html, Bootstrap Component to your project

import React, { useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; const CompanyManagement = () => { const [companies, setCompanies] = useState([]); const [form, setForm] = useState({ name: '', location: '', linkedIn: '', emails: '', phones: '', comments: '', periodicity: '', }); const [editIndex, setEditIndex] = useState(null); const [errors, setErrors] = useState({}); const navigate = useNavigate(); useEffect(() => { const savedCompanies = JSON.parse(localStorage.getItem('companies')) || []; setCompanies(savedCompanies); }, []); const handleInputChange = (e) => { const { name, value } = e.target; setForm({ ...form, [name]: value }); }; const validateForm = () => { const newErrors = {}; if (!form.name.trim()) newErrors.name = 'Name is required.'; if (!form.location.trim()) newErrors.location = 'Location is required.'; if (!form.linkedIn.trim()) newErrors.linkedIn = 'LinkedIn is required.'; const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; const emailArray = form.emails.split(',').map(email => email.trim()); if (!form.emails.trim() || !emailArray.every(email => emailPattern.test(email))) { newErrors.emails = 'Provide a valid email or a comma-separated list of emails.'; } const phonePattern = /^\d{10}$/; const phoneArray = form.phones.split(',').map(phone => phone.trim()); if (!form.phones.trim() || !phoneArray.every(phone => phonePattern.test(phone))) { newErrors.phones = 'Provide valid phone numbers (10 digits each, separated by commas).'; } if (!form.periodicity.trim()) newErrors.periodicity = 'Periodicity is required.'; setErrors(newErrors); return Object.keys(newErrors).length === 0; }; const handleAddOrEditCompany = () => { if (!validateForm()) return; if (editIndex !== null) { const updatedCompanies = [...companies]; updatedCompanies[editIndex] = form; setCompanies(updatedCompanies); localStorage.setItem('companies', JSON.stringify(updatedCompanies)); } else { const updatedCompanies = [...companies, form]; setCompanies(updatedCompanies); localStorage.setItem('companies', JSON.stringify(updatedCompanies)); } setForm({ name: '', location: '', linkedIn: '', emails: '', phones: '', comments: '', periodicity: '', }); setEditIndex(null); setErrors({}); }; const handleEditCompany = (index) => { setForm(companies[index]); setEditIndex(index); setErrors({}); }; const handleDeleteCompany = (index) => { const updatedCompanies = companies.filter((_, i) => i !== index); setCompanies(updatedCompanies); localStorage.setItem('companies', JSON.stringify(updatedCompanies)); }; return ( <div className="bg-calendar-pattern bg-cover bg-center min-h-screen p-6 flex flex-col items-center"> <div className="max-w-4xl w-full bg-white shadow-md rounded-lg p-6"> <h2 className="text-2xl font-bold text-center text-gray-800 mb-6"> Company Management </h2> {/* Form Section */} <form className="space-y-4"> {Object.keys(form).map((field) => ( <div key={field} className="flex flex-col"> <label className="font-medium text-gray-700"> {field.charAt(0).toUpperCase() + field.slice(1)}: </label> <input className={`mt-1 p-2 border rounded-md focus:outline-none ${ errors[field] ? 'border-red-500 focus:ring-2 focus:ring-red-500' : 'focus:ring-2 focus:ring-indigo-500' }`} name={field} value={form[field]} onChange={handleInputChange} placeholder={`Enter ${field}`} /> {errors[field] && ( <p className="text-red-500 text-sm mt-1">{errors[field]}</p> )} </div> ))} <button type="button" onClick={handleAddOrEditCompany} className="w-full bg-indigo-500 text-white py-2 rounded-md hover:bg-indigo-600 transition duration-300" > {editIndex !== null ? 'Update Company' : 'Add Company'} </button> </form> {/* Company List Section */} <ul className="mt-8 space-y-4"> {companies.map((company, index) => ( <li key={index} className="bg-gray-100 p-4 rounded-lg shadow hover:shadow-lg transition duration-300" > <h3 className="text-lg font-bold text-gray-800">{company.name}</h3> <p className="text-gray-600"><strong>Location:</strong> {company.location}</p> <p className="text-gray-600"> <strong>LinkedIn:</strong>{' '} <a href={company.linkedIn} target="_blank" rel="noopener noreferrer" className="text-indigo-500 underline" > {company.linkedIn} </a> </p> <p className="text-gray-600"><strong>Emails:</strong> {company.emails}</p> <p className="text-gray-600"><strong>Phones:</strong> {company.phones}</p> <p className="text-gray-600"><strong>Comments:</strong> {company.comments}</p> <p className="text-gray-600"><strong>Periodicity:</strong> {company.periodicity}</p> <div className="mt-2 flex justify-between"> <button onClick={() => handleEditCompany(index)} className="bg-yellow-500 text-white py-1 px-4 rounded hover:bg-yellow-600 transition duration-300" > Edit </button> <button onClick={() => handleDeleteCompany(index)} className="bg-red-500 text-white py-1 px-4 rounded hover:bg-red-600 transition duration-300" > Delete </button> </div> </li> ))} </ul> {/* Navigation Button */} <div className="mt-6 text-center"> <button onClick={() => navigate('/communicationmethod', { state: { companies } })} className="bg-green-500 text-white py-2 px-6 rounded-md hover:bg-green-600 transition duration-300" > Manage Communication Methods </button> </div> </div> </div> ); }; export default CompanyManagement;