House Profile - Copy this React, Tailwind Component to your project

add this to home profile : import React, { useState } from "react"; import { FaBed, FaBath, FaParking, FaHeart, FaShare, FaFacebook, FaTwitter, FaLinkedin, FaComment } from "react-icons/fa"; import { MdKitchen, MdLocalLaundryService } from "react-icons/md"; import { BsHouseDoor, BsCalendarCheck } from "react-icons/bs"; import { IoClose } from "react-icons/io5"; const HouseProfile = () => { const [currentImageIndex, setCurrentImageIndex] = useState(0); const [isLightboxOpen, setIsLightboxOpen] = useState(false); const [isContactModalOpen, setIsContactModalOpen] = useState(false); const [isFavorite, setIsFavorite] = useState(false); const [message, setMessage] = useState(""); const [newComment, setNewComment] = useState(""); const houseImages = [ "images.unsplash.com/photo-1564013799919-ab600027ffc6", "images.unsplash.com/photo-1576941089067-2de3c901e126", "images.unsplash.com/photo-1583608205776-bfd35f0d9f83", "images.unsplash.com/photo-1512917774080-9991f1c4c750" ]; const amenities = [ { icon: <FaBed />, label: "4 Bedrooms" }, { icon: <FaBath />, label: "3 Bathrooms" }, { icon: <MdKitchen />, label: "Modern Kitchen" }, { icon: <FaParking />, label: "2 Parking Spots" }, { icon: <MdLocalLaundryService />, label: "Laundry Room" }, { icon: <BsHouseDoor />, label: "Garden" } ]; const discussions = [ { id: 1, user: "Sarah Johnson", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330", comment: "Love the modern design! How's the neighborhood for families?", date: "2 days ago", replies: 3 }, { id: 2, user: "Mike Peters", avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e", comment: "Is this property still available for viewing this weekend?", date: "1 day ago", replies: 1 } ]; const handleNextImage = () => { setCurrentImageIndex((prev) => (prev + 1) % houseImages.length); }; const handlePrevImage = () => { setCurrentImageIndex((prev) => (prev - 1 + houseImages.length) % houseImages.length); }; const handleMessageSubmit = (e) => { e.preventDefault(); console.log("Message sent:", message); setMessage(""); setIsContactModalOpen(false); }; const handleCommentSubmit = (e) => { e.preventDefault(); console.log("New comment:", newComment); setNewComment(""); }; return ( <div className="max-w-7xl mx-auto px-4 py-8"> {/* House Details Section */} <div className="mb-8 flex flex-col md:flex-row justify-between items-start"> <div> <h1 className="text-3xl font-bold mb-2">Modern Luxury Villa</h1> <p className="text-gray-600 mb-4">123 Luxury Lane, Beverly Hills, CA 90210</p> <div className="flex items-center gap-4 mb-4"> <span className="text-2xl font-bold text-[#0020FF]">$2,500,000</span> <span className="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">Available</span> </div> </div> <div className="flex gap-4"> <button onClick={() => setIsFavorite(!isFavorite)} className={`p-2 rounded-full ${isFavorite ? "bg-red-500 text-white" : "bg-gray-200"}`} > <FaHeart className="text-xl" /> </button> <button onClick={() => setIsContactModalOpen(true)} className="bg-[#0020FF] text-white px-6 py-2 rounded-lg hover:bg-[#0018CC] transition-colors" > Schedule Viewing </button> </div> </div> {/* [Previous sections remain unchanged...] */} {/* Community Discussions Section */} <div className="mb-8"> <h2 className="text-2xl font-bold mb-4">Community Discussions</h2> <div className="space-y-6"> {discussions.map((discussion) => ( <div key={discussion.id} className="bg-gray-50 p-4 rounded-xl"> <div className="flex items-start gap-4"> <img src={discussion.avatar} alt={discussion.user} className="w-12 h-12 rounded-full object-cover" /> <div className="flex-1"> <div className="flex justify-between items-center mb-2"> <h3 className="font-semibold">{discussion.user}</h3> <span className="text-sm text-gray-500">{discussion.date}</span> </div> <p className="text-gray-700 mb-3">{discussion.comment}</p> <div className="flex items-center gap-4"> <button className="text-[#0020FF] flex items-center gap-1"> <FaComment className="text-sm" /> <span className="text-sm">{discussion.replies} replies</span> </button> </div> </div> </div> </div> ))} </div> {/* Add Comment Form */} <form onSubmit={handleCommentSubmit} className="mt-6"> <div className="flex gap-4"> <textarea value={newComment} onChange={(e) => setNewComment(e.target.value)} placeholder="Join the discussion..." className="flex-1 p-3 border rounded-lg" rows="3" /> </div> <button type="submit" className="mt-3 bg-[#0020FF] text-white px-6 py-2 rounded-lg hover:bg-[#0018CC] transition-colors" > Post Comment </button> </form> </div> {/* [Remaining modal and lightbox code remains unchanged...] */} </div> ); }; export default HouseProfile;