function MainComponent() { const [leads, setLeads] = React.useState([]); const [newLead, setNewLead] = React.useState({ name: '', email: '', status: 'new' }); const handleChange = (e)=>{ setNewLead({ ...newLead, [e.target.name]: e.target.value }); }; const handleSubmit = (e)=>{ e.preventDefault(); setLeads([ ...leads, newLead ]); setNewLead({ name: '', email: '', status: 'new' }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f4f7f6] p-8", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center font-semibold font-roboto text-[#334155] text-4xl mb-10", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "CRM Leads Tracker"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between gap-4", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-6 flex-1", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto font-semibold text-lg text-[#334155] mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "Add New Lead"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-sm font-roboto text-[#334155]", __source: { fileName: "", lineNumber: 28, columnNumber: 17 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "name", name: "name", className: "mt-1 p-2 w-full border rounded-md", placeholder: "John Doe", value: newLead.name, onChange: handleChange, __source: { fileName: "", lineNumber: 29, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-sm font-roboto text-[#334155]", __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", id: "email", name: "email", className: "mt-1 p-2 w-full border rounded-md", placeholder: "example@domain.com", value: newLead.email, onChange: handleChange, __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "status", className: "block text-sm font-roboto text-[#334155]", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, "Status"), /*#__PURE__*/ React.createElement("select", { id: "status", name: "status", className: "mt-1 p-2 w-full border rounded-md", value: newLead.status, onChange: handleChange, __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "new", __source: { fileName: "", lineNumber: 38, columnNumber: 19 }, __self: this }, "New"), /*#__PURE__*/ React.createElement("option", { value: "contacted", __source: { fileName: "", lineNumber: 39, columnNumber: 19 }, __self: this }, "Contacted"), /*#__PURE__*/ React.createElement("option", { value: "qualified", __source: { fileName: "", lineNumber: 40, columnNumber: 19 }, __self: this }, "Qualified"), /*#__PURE__*/ React.createElement("option", { value: "lost", __source: { fileName: "", lineNumber: 41, columnNumber: 19 }, __self: this }, "Lost"), /*#__PURE__*/ React.createElement("option", { value: "closed", __source: { fileName: "", lineNumber: 42, columnNumber: 19 }, __self: this }, "Closed"))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#10b981] text-white p-2 rounded-md transition duration-500 ease-in-out hover:bg-[#059669]", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, "Add Lead"))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 bg-white shadow-lg rounded-lg p-6 overflow-y-auto max-h-[500px]", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto font-semibold text-lg text-[#334155] mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Leads List"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, leads.map((lead, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "border-b py-4", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#334155]", __source: { fileName: "", lineNumber: 53, columnNumber: 19 }, __self: this }, lead.name, " ", /*#__PURE__*/ React.createElement("span", { className: "text-xs text-[#64748b]", __source: { fileName: "", lineNumber: 53, columnNumber: 81 }, __self: this }, "(", lead.status, ")")), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-xs text-[#64748b]", __source: { fileName: "", lineNumber: 54, columnNumber: 19 }, __self: this }, lead.email)))))))); }