function MainComponent() { const [isConverting, setIsConverting] = React.useState(false); const [isPaused, setIsPaused] = React.useState(false); const [progress, setProgress] = React.useState(0); const handleConversionStartStop = ()=>{ setIsConverting(!isConverting); setIsPaused(false); if (!isConverting) { const interval = setInterval(()=>{ setProgress((prevProgress)=>{ if (prevProgress >= 100) { setIsConverting(false); clearInterval(interval); return 100; } return prevProgress + 10; }); }, 1000); } }; const handlePauseResume = ()=>{ setIsPaused(!isPaused); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f2f5] p-4", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto text-[#333] mb-6", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, "HEVC Converter"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-md space-y-4 bg-white p-6 rounded shadow", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "videoFile", className: "block mb-2 text-sm font-medium font-roboto text-gray-700", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Select Video Files"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "videoFile", name: "videoFile", accept: "video/*", multiple: true, className: "block w-full text-sm text-gray-900 border rounded-lg cursor-pointer focus:ring-blue-500 focus:border-blue-500", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-sm font-medium font-roboto text-gray-700", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Output Settings"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm font-roboto text-gray-700", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "Format: ", /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 38, columnNumber: 73 }, __self: this }, "HEVC (H.265)")), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-roboto text-gray-700", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Resolution: ", /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 39, columnNumber: 77 }, __self: this }, "480p")), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-roboto text-gray-700", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Frame Rate: ", /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 40, columnNumber: 77 }, __self: this }, "40 FPS")))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleConversionStartStop, className: "flex-1 text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium font-roboto rounded-lg text-sm px-5 py-2.5 text-center mr-4", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, isConverting ? 'Stop Conversion' : 'Start Conversion'), isConverting && /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handlePauseResume, className: "flex-1 text-gray-800 bg-gray-300 hover:bg-gray-400 focus:ring-4 focus:ring-gray-300 font-medium font-roboto rounded-lg text-sm px-5 py-2.5", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, isPaused ? 'Resume' : 'Pause')), isConverting && /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 mt-4", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-2.5 rounded-full", style: { width: `${progress}%` }, __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this })))); }