function MainComponent() { const [isUnpacking, setIsUnpacking] = React.useState(false); const [success, setSuccess] = React.useState(false); const handleSubmit = async (event)=>{ event.preventDefault(); setIsUnpacking(true); const formData = new FormData(event.target); try { setTimeout(()=>{ setIsUnpacking(false); setSuccess(true); }, 2000); } catch { setIsUnpacking(false); setSuccess(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f8fa] p-4", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-3xl text-[#121212] mb-6", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, "RAR Unpacker"), /*#__PURE__*/ React.createElement("div", { className: `bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col items-center ${isUnpacking ? 'animate-pulse' : ''}`, __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-2xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Upload a .rar file"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col items-center w-full max-w-sm", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, isUnpacking && /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full dark:bg-gray-700", __source: { fileName: "", lineNumber: 27, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full", style: { width: '50%' }, __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, "Unpacking 50%")), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded py-2 px-3 text-grey-darker mb-3 w-full", type: "file", name: "rarFile", accept: ".rar", disabled: isUnpacking, __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#3498db] hover:bg-[#2980b9] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full", type: "submit", disabled: isUnpacking, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, isUnpacking ? 'Unpacking...' : 'Unpack File')), success && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#121212]", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "✅ Your file has been successfully unpacked!")), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#121212]", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "📦 Just select your .rar file and our app will handle the rest!"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } `)); }