function MainComponent() { const [inputText, setInputText] = useState(''); const [inputBase64, setInputBase64] = useState(''); const [encodedResult, setEncodedResult] = useState(''); const [decodedResult, setDecodedResult] = useState(''); const [encodeCopySuccess, setEncodeCopySuccess] = useState(false); const [decodeCopySuccess, setDecodeCopySuccess] = useState(false); const [error, setError] = useState(''); const encodeText = ()=>{ try { const encoded = btoa(inputText); setEncodedResult(encoded); setError(''); } catch (e) { setError('Failed to encode text. Please ensure valid input.'); } }; const decodeBase64 = ()=>{ try { const decoded = atob(inputBase64); setDecodedResult(decoded); setError(''); } catch (e) { setError('Failed to decode base64. Please ensure valid input.'); } }; const copyToClipboard = async (text, setCopySuccess)=>{ try { await navigator.clipboard.writeText(text); setCopySuccess(true); setTimeout(()=>setCopySuccess(false), 2000); } catch (err) { setError('Failed to copy to clipboard'); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#f8faff] to-white dark:from-gray-900 dark:to-gray-800 p-6 md:p-10", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#0A2B7B] dark:text-blue-300 text-4xl md:text-5xl font-bold text-center mb-10 font-inter", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "BASE64 ENCODER/DECODER"), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 dark:bg-red-900/50 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-200 px-6 py-4 rounded-lg mb-6 font-inter", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-10", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg p-8 shadow-sm", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#0A2B7B] dark:text-blue-300 text-2xl font-bold mb-6 font-inter", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "Encode Text"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full h-48 p-4 border border-gray-200 dark:border-gray-700 rounded-lg mb-6 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent font-inter", placeholder: "Enter text to encode...", value: inputText, onChange: (e)=>setInputText(e.target.value), __source: { fileName: "", lineNumber: 55, columnNumber: 1 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex gap-3 mb-6", __source: { fileName: "", lineNumber: 61, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: encodeText, className: "bg-[#0A2B7B] hover:bg-[#1A3B8B] text-white px-6 py-3 rounded-lg transition-colors font-inter font-medium", __source: { fileName: "", lineNumber: 62, columnNumber: 3 }, __self: this }, "Encode"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setInputText(''), className: "border border-gray-200 dark:border-gray-700 px-6 py-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors font-inter font-medium", __source: { fileName: "", lineNumber: 68, columnNumber: 3 }, __self: this }, "Clear")), encodedResult && /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { readOnly: true, className: "w-full h-48 p-4 border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-inter", value: encodedResult, __source: { fileName: "", lineNumber: 77, columnNumber: 3 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>copyToClipboard(encodedResult, setEncodeCopySuccess), className: "absolute top-3 right-3 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors", __source: { fileName: "", lineNumber: 82, columnNumber: 3 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${encodeCopySuccess ? 'fa-check text-green-500' : 'fa-copy'}`, __source: { fileName: "", lineNumber: 86, columnNumber: 5 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg p-8 shadow-sm", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#0A2B7B] dark:text-blue-300 text-2xl font-bold mb-6 font-inter", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, "Decode Base64"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full h-48 p-4 border border-gray-200 dark:border-gray-700 rounded-lg mb-6 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent font-inter", placeholder: "Enter base64 to decode...", value: inputBase64, onChange: (e)=>setInputBase64(e.target.value), __source: { fileName: "", lineNumber: 96, columnNumber: 1 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex gap-3 mb-6", __source: { fileName: "", lineNumber: 102, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: decodeBase64, className: "bg-[#0A2B7B] hover:bg-[#1A3B8B] text-white px-6 py-3 rounded-lg transition-colors font-inter font-medium", __source: { fileName: "", lineNumber: 103, columnNumber: 3 }, __self: this }, "Decode"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setInputBase64(''), className: "border border-gray-200 dark:border-gray-700 px-6 py-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors font-inter font-medium", __source: { fileName: "", lineNumber: 109, columnNumber: 3 }, __self: this }, "Clear")), decodedResult && /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { readOnly: true, className: "w-full h-48 p-4 border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-inter", value: decodedResult, __source: { fileName: "", lineNumber: 118, columnNumber: 3 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>copyToClipboard(decodedResult, setDecodeCopySuccess), className: "absolute top-3 right-3 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors", __source: { fileName: "", lineNumber: 123, columnNumber: 3 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${decodeCopySuccess ? 'fa-check text-green-500' : 'fa-copy'}`, __source: { fileName: "", lineNumber: 127, columnNumber: 5 }, __self: this }))))))); }