function MainComponent() { const [stockData, setStockData] = useState(null); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); const [showMeme, setShowMeme] = useState(false); useEffect(()=>{ const fetchStockData = async ()=>{ try { const response = await fetch("/api/tesla-stock", { method: "POST", body: JSON.stringify({}) }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const data = await response.json(); if (data.error) { setError(data.error); } else { setStockData(data); } } catch (err) { setError("Failed to fetch stock data"); console.error(err); } finally{ setIsLoading(false); } }; fetchStockData(); }, []); const renderChangeValue = (change)=>{ const isNegative = parseFloat(change.percentage) < 0; const color = isNegative ? "text-red-500" : "text-green-500"; const icon = isNegative ? "📉" : "📈"; return /*#__PURE__*/ React.createElement("span", { className: `${color} font-bold text-lg`, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, icon, " ", Math.abs(change.percentage), "% ($", Math.abs(change.absolute), ")"); }; const getMemeText = ()=>{ if (!stockData) return ""; const yearChange = parseFloat(stockData.changes.oneYear.percentage); if (yearChange < -30) return "TO THE CORE! 🔥🔥🔥"; if (yearChange < -15) return "PAIN! 😭"; if (yearChange < 0) return "NOT STONKS! 📉"; if (yearChange < 15) return "HODL! 💎🙌"; return "TO THE MOON! 🚀🚀🚀"; }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-gray-900 to-black text-white py-8 px-4", __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-8", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-purple-600 text-center", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "TESLA STONK TRACKER")), /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-300 italic", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, '"What goes up must come down... sometimes way down 🤣"')), isLoading && /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800 p-6 rounded-xl shadow-glow animate-pulse", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-8 bg-gray-700 rounded w-1/3 mb-4", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-24 bg-gray-700 rounded mb-4", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-64 bg-gray-700 rounded", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this })), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-900/50 p-6 rounded-xl border border-red-500", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-red-400 mb-2", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "Error"), /*#__PURE__*/ React.createElement("p", { className: "text-red-300", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex justify-center", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://media.giphy.com/media/XqpnXaeZPnupy/giphy.gif", alt: "Error meme", className: "rounded-lg max-h-60", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }))), stockData && !isLoading && /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800/80 p-8 rounded-xl shadow-glow border border-purple-500/30", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mb-6", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3 mb-2", __source: { fileName: "", lineNumber: 101, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://logo.clearbit.com/tesla.com", alt: "Tesla Logo", className: "h-12 w-12 rounded-full", __source: { fileName: "", lineNumber: 102, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-bold", __source: { fileName: "", lineNumber: 107, columnNumber: 19 }, __self: this }, "TSLA")), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 109, columnNumber: 17 }, __self: this }, "Last updated: ", stockData.latestDate)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-8", __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 115, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-600", __source: { fileName: "", lineNumber: 116, columnNumber: 19 }, __self: this }, "$", stockData.latestPrice), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 119, columnNumber: 19 }, __self: this }, renderChangeValue(stockData.changes.oneDay)))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-900/50 p-4 rounded-lg border border-gray-700 hover:border-purple-500/50 transition-all", __source: { fileName: "", lineNumber: 126, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-400 block mb-1", __source: { fileName: "", lineNumber: 127, columnNumber: 19 }, __self: this }, "1 Week:"), renderChangeValue(stockData.changes.oneWeek)), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-900/50 p-4 rounded-lg border border-gray-700 hover:border-purple-500/50 transition-all", __source: { fileName: "", lineNumber: 130, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-400 block mb-1", __source: { fileName: "", lineNumber: 131, columnNumber: 19 }, __self: this }, "1 Month:"), renderChangeValue(stockData.changes.oneMonth)), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-900/50 p-4 rounded-lg border border-gray-700 hover:border-purple-500/50 transition-all", __source: { fileName: "", lineNumber: 134, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-400 block mb-1", __source: { fileName: "", lineNumber: 135, columnNumber: 19 }, __self: this }, "3 Months:"), renderChangeValue(stockData.changes.threeMonths)), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-900/50 p-4 rounded-lg border border-gray-700 hover:border-purple-500/50 transition-all", __source: { fileName: "", lineNumber: 138, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-400 block mb-1", __source: { fileName: "", lineNumber: 139, columnNumber: 19 }, __self: this }, "6 Months:"), renderChangeValue(stockData.changes.sixMonths)), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-900/50 p-4 rounded-lg border border-gray-700 hover:border-purple-500/50 transition-all md:col-span-2", __source: { fileName: "", lineNumber: 142, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-400 block mb-1", __source: { fileName: "", lineNumber: 143, columnNumber: 19 }, __self: this }, "1 Year:"), renderChangeValue(stockData.changes.oneYear))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center", __source: { fileName: "", lineNumber: 148, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowMeme(!showMeme), className: "bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white font-bold py-3 px-6 rounded-full transform hover:scale-105 transition-all shadow-lg", __source: { fileName: "", lineNumber: 149, columnNumber: 17 }, __self: this }, showMeme ? "Hide Reaction" : "Show Reaction")), showMeme && /*#__PURE__*/ React.createElement("div", { className: "mt-6 flex flex-col items-center", __source: { fileName: "", lineNumber: 158, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-3xl font-extrabold mb-4 text-center text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-red-500", __source: { fileName: "", lineNumber: 159, columnNumber: 19 }, __self: this }, getMemeText()), /*#__PURE__*/ React.createElement("img", { src: parseFloat(stockData.changes.oneYear.percentage) < 0 ? "https://i.imgflip.com/6y2s5g.jpg" // Not stonks meme : "https://i.imgflip.com/3pldqy.jpg" // Stonks meme , alt: "Stonks meme", className: "max-h-60 rounded-lg border-4 border-yellow-500", __source: { fileName: "", lineNumber: 162, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800/80 p-8 rounded-xl shadow-glow border border-purple-500/30", __source: { fileName: "", lineNumber: 175, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-600", __source: { fileName: "", lineNumber: 176, columnNumber: 15 }, __self: this }, "Price History (Last 90 Days)"), /*#__PURE__*/ React.createElement("div", { className: "h-64 w-full", __source: { fileName: "", lineNumber: 179, columnNumber: 15 }, __self: this }, stockData.chartData && /*#__PURE__*/ React.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 1000 400", __source: { fileName: "", lineNumber: 181, columnNumber: 19 }, __self: this }, (()=>{ const data = stockData.chartData; const prices = data.map((d)=>d.close); const dates = data.map((d)=>d.date); const minPrice = Math.min(...prices) * 0.95; const maxPrice = Math.max(...prices) * 1.05; const xStep = 1000 / (data.length - 1); const getY = (price)=>400 - (price - minPrice) / (maxPrice - minPrice) * 350 - 25; let path = `M 0 ${getY(data[0].close)}`; for(let i = 1; i < data.length; i++){ path += ` L ${i * xStep} ${getY(data[i].close)}`; } const isOverallNegative = prices[0] > prices[prices.length - 1]; const strokeColor = isOverallNegative ? "#FF416C" : "#00F5A0"; const gradientStart = isOverallNegative ? "#FF416C" : "#00F5A0"; const gradientEnd = isOverallNegative ? "#FF4B2B" : "#4FACFE"; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("defs", { __source: { fileName: "", lineNumber: 216, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("linearGradient", { id: "lineGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", __source: { fileName: "", lineNumber: 217, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("stop", { offset: "0%", stopColor: gradientStart, __source: { fileName: "", lineNumber: 224, columnNumber: 31 }, __self: this }), /*#__PURE__*/ React.createElement("stop", { offset: "100%", stopColor: gradientEnd, __source: { fileName: "", lineNumber: 225, columnNumber: 31 }, __self: this })), /*#__PURE__*/ React.createElement("linearGradient", { id: "areaGradient", x1: "0%", y1: "0%", x2: "0%", y2: "100%", __source: { fileName: "", lineNumber: 227, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("stop", { offset: "0%", stopColor: isOverallNegative ? "rgba(255, 65, 108, 0.5)" : "rgba(0, 245, 160, 0.5)", __source: { fileName: "", lineNumber: 234, columnNumber: 31 }, __self: this }), /*#__PURE__*/ React.createElement("stop", { offset: "100%", stopColor: isOverallNegative ? "rgba(255, 75, 43, 0)" : "rgba(79, 172, 254, 0)", __source: { fileName: "", lineNumber: 242, columnNumber: 31 }, __self: this }))), /*#__PURE__*/ React.createElement("line", { x1: "0", y1: "375", x2: "1000", y2: "375", stroke: "#333", strokeWidth: "1", __source: { fileName: "", lineNumber: 253, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("line", { x1: "0", y1: "25", x2: "1000", y2: "25", stroke: "#333", strokeWidth: "1", __source: { fileName: "", lineNumber: 261, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("text", { x: "10", y: "25", className: "text-xs fill-gray-400", __source: { fileName: "", lineNumber: 270, columnNumber: 27 }, __self: this }, "$", maxPrice.toFixed(2)), /*#__PURE__*/ React.createElement("text", { x: "10", y: "375", className: "text-xs fill-gray-400", __source: { fileName: "", lineNumber: 273, columnNumber: 27 }, __self: this }, "$", minPrice.toFixed(2)), /*#__PURE__*/ React.createElement("text", { x: "0", y: "395", className: "text-xs fill-gray-400", __source: { fileName: "", lineNumber: 281, columnNumber: 27 }, __self: this }, dates[0]), /*#__PURE__*/ React.createElement("text", { x: "480", y: "395", className: "text-xs fill-gray-400", __source: { fileName: "", lineNumber: 284, columnNumber: 27 }, __self: this }, dates[Math.floor(dates.length / 2)]), /*#__PURE__*/ React.createElement("text", { x: "960", y: "395", className: "text-xs fill-gray-400", __source: { fileName: "", lineNumber: 291, columnNumber: 27 }, __self: this }, dates[dates.length - 1]), /*#__PURE__*/ React.createElement("path", { d: `${path} L ${(data.length - 1) * xStep} 375 L 0 375 Z`, fill: "url(#areaGradient)", __source: { fileName: "", lineNumber: 299, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("path", { d: path, fill: "none", stroke: "url(#lineGradient)", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 304, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("circle", { cx: (data.length - 1) * xStep, cy: getY(data[data.length - 1].close), r: "6", fill: isOverallNegative ? "#FF416C" : "#00F5A0", stroke: "#fff", strokeWidth: "2", __source: { fileName: "", lineNumber: 313, columnNumber: 27 }, __self: this })); })()))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-800/80 p-8 rounded-xl shadow-glow border border-purple-500/30", __source: { fileName: "", lineNumber: 329, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-600", __source: { fileName: "", lineNumber: 330, columnNumber: 15 }, __self: this }, "💎 Diamond Hands Analysis 💎"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 333, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-lg", __source: { fileName: "", lineNumber: 334, columnNumber: 17 }, __self: this }, parseFloat(stockData.changes.oneYear.percentage) < 0 ? "Looks like Elon's tweets aren't helping anymore! Tesla stock is in the red zone. 🔴" : "Tesla stock is mooning! Elon's memes are working! 🚀"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-lg", __source: { fileName: "", lineNumber: 339, columnNumber: 17 }, __self: this }, parseFloat(stockData.changes.oneMonth.percentage) < 0 ? "Paper hands are selling, but true believers HODL! 💎🙌" : "The shorts are getting squeezed! Keep HODLing! 💪"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 text-lg", __source: { fileName: "", lineNumber: 344, columnNumber: 17 }, __self: this }, "Remember: Stonks only go up... eventually! Maybe. Not financial advice. 🤷‍♂️")), /*#__PURE__*/ React.createElement("div", { className: "mt-8 flex justify-center", __source: { fileName: "", lineNumber: 350, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: parseFloat(stockData.changes.oneYear.percentage) < -20 ? "https://media.giphy.com/media/XqpnXaeZPnupy/giphy.gif" // This is fine meme : parseFloat(stockData.changes.oneYear.percentage) < 0 ? "https://media.giphy.com/media/d2lcHJTG5Tscg/giphy.gif" // Crying meme : "https://media.giphy.com/media/YnkMcHgNIMW4Yfmjxr/giphy.gif" // To the moon , alt: "Reaction meme", className: "rounded-lg max-h-60 border-2 border-gray-700", __source: { fileName: "", lineNumber: 351, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "mt-12 text-center text-gray-500 text-sm", __source: { fileName: "", lineNumber: 368, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 369, columnNumber: 9 }, __self: this }, "Not financial advice. DYOR. Sir, this is a Wendy's. 🍔")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 372, columnNumber: 7 }, __self: this }, ` .shadow-glow { box-shadow: 0 0 15px rgba(124, 58, 237, 0.3); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } `)); }