function MainComponent() { const [easingFunction, setEasingFunction] = React.useState('ease-in-out'); const [duration, setDuration] = React.useState(4); const easingFunctions = { 'ease-in-out': 'cubic-bezier(0.42, 0, 0.58, 1)', 'ease-in': 'cubic-bezier(0.42, 0, 1, 1)', 'ease-out': 'cubic-bezier(0, 0, 0.58, 1)', 'linear': 'linear' }; const updateAnimation = ()=>{ const ball = document.querySelector('.animated-ball'); ball.style.animation = `move ${duration}s ${easingFunctions[easingFunction]} infinite`; }; React.useEffect(()=>{ updateAnimation(); }, [ easingFunction, duration ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row items-center justify-center min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 mb-8 md:mb-0 md:mr-4", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 text-center", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "Animation Preview"), /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[400px] bg-white rounded-lg shadow-md overflow-hidden", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animated-ball absolute left-0 top-1/2 w-8 h-8 bg-blue-500 rounded-full transform -translate-y-1/2", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Easing Function:", /*#__PURE__*/ React.createElement("select", { className: "ml-2 p-1 border rounded", value: easingFunction, onChange: (e)=>setEasingFunction(e.target.value), __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, Object.keys(easingFunctions).map((func)=>/*#__PURE__*/ React.createElement("option", { key: func, value: func, __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, func)))), /*#__PURE__*/ React.createElement("label", { className: "block", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Duration (seconds):", /*#__PURE__*/ React.createElement("input", { type: "number", className: "ml-2 p-1 border rounded w-16", value: duration, onChange: (e)=>setDuration(Number(e.target.value)), min: "1", max: "10", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 md:ml-4", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 text-center", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Easing Function Graph"), /*#__PURE__*/ React.createElement("div", { className: "w-full h-[400px] bg-white rounded-lg shadow-md p-4", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-full h-full", viewBox: "0 0 100 100", preserveAspectRatio: "none", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: getPath(easingFunction), fill: "none", stroke: "#3B82F6", strokeWidth: "2", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("line", { x1: "0", y1: "100", x2: "100", y2: "100", stroke: "#000000", strokeWidth: "0.5", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("line", { x1: "0", y1: "100", x2: "0", y2: "0", stroke: "#000000", strokeWidth: "0.5", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, ` @keyframes move { 0% { left: 0; } 100% { left: calc(100% - 2rem); } } `)); } function getPath(easingFunction) { switch(easingFunction){ case 'ease-in-out': return 'M0,100 C30,100 70,0 100,0'; case 'ease-in': return 'M0,100 C50,100 100,0 100,0'; case 'ease-out': return 'M0,100 C0,100 50,0 100,0'; case 'linear': return 'M0,100 L100,0'; default: return 'M0,100 C30,100 70,0 100,0'; } }