function MainComponent() { const employeeData = { "id": 3, "first_name": "Peter", "last_name": "Parker", "middle_name": null, "email": "2@gmail.com", "email_personal": null, "date_hired_on": "2024-03-03T22:00:00.000Z", "job_title": "dev", "phone_personal": null, "phone": null, "date_birth": null, "gender": null, "avatar_url": null, "employee_position": { "department": null, "division": null, "position": null, "level": null, "date_effective_from": null, "manager": null }, "permissions": { "employee_name": "edit", "employee_email": "edit", "employee_date_birth": "edit", "employee_gender": "edit", "employee_hired_on": "edit", "employee_phone_personal": "edit", "employee_phone": "edit", "employee_email_personal": "edit" } }; return /*#__PURE__*/ React.createElement("div", { className: "m-10 p-5 border rounded-lg shadow bg-white", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mb-5", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[100px] h-[100px] bg-gray-200 rounded-full overflow-hidden", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: employeeData.avatar_url || "path/to/default-avatar.png", alt: "Employee Avatar", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-xl mt-3", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, employeeData.first_name, " ", employeeData.last_name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, employeeData.job_title)), /*#__PURE__*/ React.createElement("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Full Name:"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, employeeData.first_name, " ", employeeData.last_name)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Email:"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, employeeData.email)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Date Hired:"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, new Date(employeeData.date_hired_on).toLocaleDateString())))); }

Peter Parker