function MainComponent() { const [selectedMember, setSelectedMember] = React.useState(null); const teamMembers = [ { id: '1', name: 'John Doe', role: 'CEO' }, { id: '2', name: 'Jane Smith', role: 'CTO' }, { id: '3', name: 'Emily Johnson', role: 'CFO' }, { id: '4', name: 'Michael Brown', role: 'COO' }, { id: '5', name: 'Jessica Davis', role: 'CMO' }, { id: '6', name: 'David Wilson', role: 'CIO' }, { id: '7', name: 'Sarah Miller', role: 'CSO' }, { id: '8', name: 'James Taylor', role: 'CKO' }, { id: '9', name: 'William Anderson', role: 'Head of HR' }, { id: '10', name: 'Linda Thomas', role: 'Head of Communications' } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-10", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-3xl font-semibold mb-10", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, "Our team"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-[10px] justify-items-center mx-auto", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, teamMembers.map((member)=>/*#__PURE__*/ React.createElement("div", { key: member.id, className: "w-[300px] h-[350px] bg-white p-4 shadow-lg flex flex-col items-center justify-center space-y-4 rounded-lg cursor-pointer", onClick: ()=>setSelectedMember(member), __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-24 h-24 rounded-full object-cover", src: `https://source.unsplash.com/random/?professional%20headshot&${member.id}`, alt: `${member.name}, ${member.role}`, __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, member.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, member.role))))), selectedMember && /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 right-0 w-[300px] h-full bg-white p-6 shadow-lg", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedMember(null), __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "✖️")), /*#__PURE__*/ React.createElement("div", { className: "mt-6 flex flex-col items-center", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-32 h-32 rounded-full object-cover", src: `https://source.unsplash.com/random/?professional%20headshot&${selectedMember.id}`, alt: `${selectedMember.name} profile`, __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "mt-4 font-bold text-lg", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, selectedMember.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, selectedMember.role)))); }