function MainComponent() { const [avatars, setAvatars] = React.useState([ { id: 1, name: "User 1", img: "assets/avatar1.png", talking: false }, { id: 2, name: "User 2", img: "assets/avatar2.png", talking: false }, { id: 3, name: "User 3", img: "assets/avatar3.png", talking: false } ]); const toggleTalking = (id)=>{ setAvatars((prevAvatars)=>prevAvatars.map((user)=>user.id === id ? { ...user, talking: !user.talking } : user)); }; const changeAvatar = (id)=>{ const fileInput = document.createElement("input"); fileInput.type = "file"; fileInput.accept = "image/*"; fileInput.onchange = ()=>{ const file = fileInput.files[0]; if (file) { const reader = new FileReader(); reader.onload = (e)=>{ setAvatars((prevAvatars)=>prevAvatars.map((user)=>user.id === id ? { ...user, img: e.target.result } : user)); }; reader.readAsDataURL(file); } }; fileInput.click(); }; const changeUserName = (id)=>{ const newName = prompt("Enter the new user name:"); if (newName) { setAvatars((prevAvatars)=>prevAvatars.map((user)=>user.id === id ? { ...user, name: newName } : user)); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row w-full h-screen", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-full md:w-[250px] bg-[#121212] p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white font-roboto text-lg mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "Control Panel"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, avatars.map((user)=>/*#__PURE__*/ React.createElement("li", { key: user.id, className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-white font-roboto", onClick: ()=>toggleTalking(user.id), __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, "🎤 ", user.name), /*#__PURE__*/ React.createElement("button", { onClick: ()=>changeUserName(user.id), className: "text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, "✎"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>changeAvatar(user.id), className: "text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "🖼️"))))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 flex flex-col items-center py-8 space-y-4", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, avatars.map((user)=>/*#__PURE__*/ React.createElement("div", { key: user.id, className: `w-[100px] h-[100px] cursor-pointer flex flex-col items-center space-y-2 ${user.talking ? 'border-4 border-green-500 animate-bounce' : ''}`, style: { position: 'relative' }, draggable: "true", onDragEnd: (e)=>{ e.currentTarget.style.left = `${e.clientX - 50}px`; e.currentTarget.style.top = `${e.clientY - 50}px`; }, __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: user.img, alt: `${user.name} avatar`, className: "w-full h-full object-cover rounded-full", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, user.name)))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, ` @keyframes discordTalk { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } } .animate-bounce { animation: discordTalk 1.5s infinite; } `)); }