function MainComponent() { const [isDragging, setIsDragging] = React.useState(false); const [isPlaying, setIsPlaying] = React.useState(false); const handleDragStart = ()=>{ setIsDragging(true); }; const handleDragEnd = ()=>{ setIsDragging(false); }; const handlePlayClick = ()=>{ setIsPlaying(true); }; const handlePauseClick = ()=>{ setIsPlaying(false); }; const handleStopClick = ()=>{ setIsPlaying(false); }; const turntableClasses = `transition ease-linear duration-75 w-[300px] h-[300px] md:w-[400px] md:h-[400px] lg:w-[500px] lg:h-[500px] bg-no-repeat bg-center mx-auto shadow-inner ${isDragging ? "animate-scratch" : isPlaying ? "animate-spin" : "pause-spin"}`; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#202020] p-8 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center bg-white rounded-full shadow-inner", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center w-12 h-12 text-[#202020]", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "🔍"), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Paste url here", name: "songUrl", className: "w-full py-2 pl-4 pr-12 text-[#202020] rounded-r-full focus:outline-none font-roboto", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex flex-col items-center w-full py-4 bg-white rounded-full shadow-inner cursor-pointer font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#202020]", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, "Choose a file or drag it here."), /*#__PURE__*/ React.createElement("input", { type: "file", name: "songFile", className: "hidden", accept: "audio/*", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: turntableClasses, onMouseDown: handleDragStart, onMouseUp: handleDragEnd, onMouseLeave: handleDragEnd, style: { backgroundImage: `url('/turntable.svg')` }, __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between my-4", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handlePlayClick, className: "bg-[#ffffff] p-2 rounded-full shadow-inner", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "▶️"), /*#__PURE__*/ React.createElement("button", { onClick: handlePauseClick, className: "bg-[#ffffff] p-2 rounded-full shadow-inner", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "⏸️"), /*#__PURE__*/ React.createElement("button", { onClick: handleStopClick, className: "bg-[#ffffff] p-2 rounded-full shadow-inner", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "⏹️"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#ffffff] p-2 rounded-full shadow-inner", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "🔊")), /*#__PURE__*/ React.createElement("p", { className: "text-[#ffffff] font-roboto mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "Press and hold the turntable to scratch. Release to stop scratching. Hit Play to start spinning and playing the track.")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, ` @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes scratch { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-15deg); } } .pause-spin { animation-play-state: paused; } `)); }