function MainComponent() { const [channelHandle, setChannelHandle] = useState(""); const [subscriberCount, setSubscriberCount] = useState(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const fetchSubscriberCount = useCallback(async ()=>{ if (!channelHandle) return; setLoading(true); setError(null); try { const response = await fetch("/api/get-subscriber-count", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ channelHandle }) }); if (!response.ok) { throw new Error("Failed to fetch subscriber count"); } const data = await response.json(); setSubscriberCount(data.subscriberCount); } catch (err) { console.error(err); setError("Could not fetch subscriber count. Please try again."); } finally{ setLoading(false); } }, [ channelHandle ]); useEffect(()=>{ if (subscriberCount) { const interval = setInterval(fetchSubscriberCount, 10000); // Update every 10 seconds return ()=>clearInterval(interval); } }, [ subscriberCount, fetchSubscriberCount ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 dark:bg-gray-900 py-12 px-4", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center text-gray-900 dark:text-white mb-8", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "YouTube Live Subscriber Count"), /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Enter YouTube Channel Handle"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "@channelhandle", value: channelHandle, onChange: (e)=>setChannelHandle(e.target.value), className: "flex-1 rounded-md border border-gray-300 dark:border-gray-600 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: fetchSubscriberCount, disabled: !channelHandle || loading, className: "px-6 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 disabled:opacity-50", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, loading ? "Loading..." : "Track"))), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-center mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, error), subscriberCount !== null && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-gray-600 dark:text-gray-400 mb-2", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, "Subscriber Count"), /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-bold text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, subscriberCount.toLocaleString()), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500 dark:text-gray-400 mt-2", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, "Updates every 10 seconds"))))); }