function PropertyForm() { const [formData, setFormData] = useState({ address: "", price: "", bedrooms: "", bathrooms: "", squareFootage: "", rentalIncome: "" }); const handleChange = (e)=>{ setFormData({ ...formData, [e.target.name]: e.target.value }); }; const handleSubmit = (e)=>{ e.preventDefault(); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto p-6", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "address", value: formData.address, onChange: handleChange, placeholder: "Adresse", className: "w-full px-4 py-2 border rounded", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "price", value: formData.price, onChange: handleChange, placeholder: "Prix €", className: "w-full px-4 py-2 border rounded", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "rentalIncome", value: formData.rentalIncome, onChange: handleChange, placeholder: "Revenu locatif mensuel €", className: "w-full px-4 py-2 border rounded", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "bedrooms", value: formData.bedrooms, onChange: handleChange, placeholder: "Nombre de chambres", className: "w-full px-4 py-2 border rounded", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "bathrooms", value: formData.bathrooms, onChange: handleChange, placeholder: "Nombre de salles de bain", className: "w-full px-4 py-2 border rounded", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "squareFootage", value: formData.squareFootage, onChange: handleChange, placeholder: "Surface (m²)", className: "w-full px-4 py-2 border rounded", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, "Soumettre"))); } function PropertyFormStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 90, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PropertyForm, { __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this })); } function PropertyCard({ image, address, price, roi, monthlyIncome, propertyType }) { return /*#__PURE__*/ React.createElement("div", { className: "rounded-lg overflow-hidden shadow-lg max-w-sm bg-white", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative h-[200px]", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: `Vue de la propriété à ${address}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg font-bold mb-2 text-gray-800", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, address), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-bold text-[#2563eb]", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, price, "€"), /*#__PURE__*/ React.createElement("span", { className: "bg-[#dbeafe] text-[#1e40af] px-3 py-1 rounded-full text-sm", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, propertyType)), /*#__PURE__*/ React.createElement("div", { className: "border-t pt-4", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, "ROI Annuel"), /*#__PURE__*/ React.createElement("p", { className: "font-bold text-[#059669]", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, roi, "%")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "Revenu Mensuel"), /*#__PURE__*/ React.createElement("p", { className: "font-bold text-gray-800", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, monthlyIncome, "€")))))); } function PropertyCardStory() { const propertyExample = { image: "/images/property-example.jpg", address: "123 Avenue des Champs-Élysées, Paris", price: "850,000", roi: "7.2", monthlyIncome: "2,500", propertyType: "Appartement" }; const propertyExample2 = { image: "/images/property-example-2.jpg", address: "45 Rue du Commerce, Lyon", price: "420,000", roi: "6.8", monthlyIncome: "1,800", propertyType: "Maison" }; return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-gray-100 flex flex-wrap gap-8", __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PropertyCard, { ...propertyExample, __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(PropertyCard, { ...propertyExample2, __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this })); } function MainComponent() { const [showForm, setShowForm] = useState(false); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-8", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, "Nos Propriétés"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowForm(true), className: "bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, "+ Ajouter une propriété")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null)), showForm && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 max-w-2xl w-full mx-4", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, "Ajouter une propriété"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowForm(false), className: "text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xl", __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement(React.Fragment, null)))); }