function MainComponent() { const candleStickStyle = { height: '30px', width: '8px', backgroundColor: '#DEDEDE', display: 'inline-block', margin: '0 2px' }; const candleStickInnerStyle = { height: '20px', width: '8px', backgroundColor: '#010101', margin: '5px 0' }; const flameStyle = { height: '10px', width: '6px', backgroundColor: '#FFA500', margin: '-15px auto 0 auto' }; const wickStyle = { height: '4px', width: '2px', backgroundColor: '#000', margin: '-4px auto 0 auto' }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen bg-[#F5F5F5]", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-between font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: flameStyle, __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { style: wickStyle, __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { style: candleStickStyle, __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: candleStickInnerStyle, __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, ` @keyframes flickerAnimation { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } @keyframes meltAnimation { 0% { transform: scaleY(1); } 100% { transform: scaleY(0.5); } } [style*="--flameAnimation: flicker"] { animation: flickerAnimation 0.15s infinite alternate; } [style*="--wickAnimation: melt"] { animation: meltAnimation 2s infinite alternate; } `), /*#__PURE__*/ React.createElement("div", { className: "p-4 absolute bottom-0 left-0 text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Candlestick Pattern"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "An animation representing a flickering and melting candlestick."))); }