function MainComponent() { const [passwords, setPasswords] = React.useState([]); const [numberOfPasswords, setNumberOfPasswords] = React.useState(1); const [showTooltip, setShowTooltip] = React.useState(false); const generatePassword = ()=>{ const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+"; const passwordLength = 12; let tempPasswords = []; for(let j = 0; j < numberOfPasswords; j++){ let generatedPassword = ''; for(let i = 0; i < passwordLength; i++){ const randomNum = Math.floor(Math.random() * chars.length); generatedPassword += chars.substring(randomNum, randomNum + 1); } tempPasswords.push(generatedPassword); } setPasswords(tempPasswords); }; const handleGenerateClick = ()=>{ generatePassword(); }; const handleChange = (event)=>{ setNumberOfPasswords(parseInt(event.target.value) || 1); }; const handleMouseEnter = ()=>{ setShowTooltip(true); }; const handleMouseLeave = ()=>{ setShowTooltip(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F7F8FA] p-4", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative bg-white rounded-md shadow-lg p-8 m-4 w-full md:w-1/2 lg:w-1/3", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-xl mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Python GUI Password Generator"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "number-of-passwords", className: "font-semibold block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Number of Passwords:"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "number-of-passwords", name: "number-of-passwords", min: "1", value: numberOfPasswords, onChange: handleChange, className: "border w-full p-3 rounded bg-gray-100 text-gray-700", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-semibold block text-gray-700 mb-2", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Generated Passwords:"), /*#__PURE__*/ React.createElement("div", { className: "w-full p-3 rounded bg-gray-100 text-gray-700 fade-in", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, passwords.map((password, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "break-all", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, password)))), /*#__PURE__*/ React.createElement("button", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleGenerateClick, className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded cursor-pointer relative", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "Generate Passwords", showTooltip && /*#__PURE__*/ React.createElement("div", { className: "absolute z-10 left-0 mt-2 w-32 text-center py-2 bg-black text-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "Click to generate!"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 1s ease-in-out; } `)); }