function MainComponent() { const [searchTerm, setSearchTerm] = React.useState(''); const [clientData, setClientData] = React.useState({ progress: [], workouts: [], payments: [] }); const handleSearchChange = (event)=>{ setSearchTerm(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl text-[#121212]", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "Trainer Application"), /*#__PURE__*/ React.createElement("input", { className: "border-2 border-[#121212] p-2", type: "text", placeholder: "Search by clients", value: searchTerm, onChange: handleSearchChange, name: "searchClient", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border p-4 flex flex-col", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "Client Progress"), /*#__PURE__*/ React.createElement("div", { className: "overflow-auto", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, clientData.progress.map((progressItem, index)=>/*#__PURE__*/ React.createElement("p", { key: index, className: "font-roboto text-sm py-1", __source: { fileName: "", lineNumber: 30, columnNumber: 17 }, __self: this }, progressItem)))), /*#__PURE__*/ React.createElement("div", { className: "border p-4 flex flex-col", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "Workouts"), /*#__PURE__*/ React.createElement("div", { className: "overflow-auto", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, clientData.workouts.map((workout, index)=>/*#__PURE__*/ React.createElement("p", { key: index, className: "font-roboto text-sm py-1", __source: { fileName: "", lineNumber: 38, columnNumber: 17 }, __self: this }, workout.name)))), /*#__PURE__*/ React.createElement("div", { className: "border p-4 flex flex-col", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Payments"), /*#__PURE__*/ React.createElement("div", { className: "overflow-auto", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, clientData.payments.map((payment, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex justify-between py-1", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }, payment.date), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 48, columnNumber: 19 }, __self: this }, "$", payment.amount)))))))); }