function MainComponent() { const [isProcessing, setIsProcessing] = React.useState(false); const [inputValue, setInputValue] = React.useState(""); const handleSubmit = async (e)=>{ e.preventDefault(); if (!inputValue) return; setIsProcessing(true); setIsProcessing(false); }; const handleChange = (e)=>{ setInputValue(e.target.value); }; const progressBar = isProcessing && /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-700 rounded-full h-1.5 overflow-hidden", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#22c55e] h-full animate-pulse", style: { animationDuration: '2s' }, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); const submitButtonClasses = `w-32 p-2 bg-blue-700 text-white font-semibold rounded-lg hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 disabled:bg-blue-300 disabled:text-blue-100 disabled:cursor-not-allowed flex justify-center items-center ${isProcessing || !inputValue ? "" : "active:translate-y-1"}`; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 text-gray-900 flex flex-col items-center justify-center font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 text-center relative", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-10 text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl 2xl:text-9xl font-extrabold tracking-tighter text-gray-800", style: { animation: 'fadeInDown 1s ease-out' }, __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "AUTO TROPICOOL REMIXER"), /*#__PURE__*/ React.createElement("form", { className: "mb-4 space-y-4 w-full px-4 sm:w-3/4 md:w-1/2 lg:w-1/3 mx-auto", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "songSource", placeholder: "Enter Song URL", className: "w-full border-4 border-gray-300 p-3 rounded-lg focus:border-blue-800 focus:ring-2 focus:ring-blue-300", onChange: handleChange, __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: submitButtonClasses, type: "submit", disabled: isProcessing || !inputValue, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: isProcessing ? 'opacity-0' : 'opacity-100', __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "REMIX"), isProcessing && /*#__PURE__*/ React.createElement("i", { className: "fa fa-circle-notch fa-spin", __source: { fileName: "", lineNumber: 43, columnNumber: 30 }, __self: this })), progressBar)), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, ` body { touch-action: none; } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulseAnimation { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } `)); }