Who do you want to follow?

\n \n

\n setNewAccount(e.target.value)} placeholder=\"Enter Twitter username\" className=\"flex-grow bg-[#1F1F22] border border-[#2D2D32] rounded-l-md px-4 py-2.5 focus:outline-none focus:ring-1 focus:ring-[#2196F3] transition-all duration-200\" />\n \n

\n All accounts are private (only visible to you)\n

\n \n {following.length > 0 &&

Following ({following.length})

\n {following.map(account =>

\n \n @{account.username}\n \n \n

)}\n

}\n \n \n

\n\n {viewMode !== 'tweets' &&

\n \n

}\n\n {viewMode === 'tweets' && tweets.length > 0 &&

\n \n Latest Tweets\n

\n \n \n \n

\n \n

\n {tweets.map((tweet, index) =>

\n \n

\n @{tweet.username}\n

\n {formatDate(tweet.timestamp)}\n

{tweet.text}

)}\n

}\n\n {viewMode === 'trends' &&

\n \n Trending Now\n

\n \n

\n \n {isLoadingTrends ?

\n \n Analyzing trends...\n

Finding what's hot right now

\n {(() => {\n try {\n const data = JSON.parse(trendsSummary);\n return data.trends && Array.isArray(data.trends) ? data.trends.map((trend, i) =>

\n #{i + 1}\n

{trend}

) :

No trends available at the moment

;\n } catch (e) {\n return

Error parsing trends data

;\n }\n })()}\n

}\n

}\n\n {viewMode === 'compose' &&

\n \n Craft Your Post\n

\n \n

\n \n {isLoadingSuggestions ?

\n \n Generating perfect tweets...\n

: <>\n

setUserPost(e.target.value)} placeholder=\"Write your post based on the trending topics...\" className=\"w-full h-40 bg-[#1F1F22] border border-[#2D2D32] rounded-md px-4 py-3 mb-5 focus:outline-none focus:ring-1 focus:ring-[#2196F3] transition-all duration-200 text-gray-200\" />\n                \n                {suggestions.length > 1 && <div className=\"mb-5 flex justify-center\">\n                    <button onClick={nextSuggestion} className=\"bg-[#1F1F22] hover:bg-[#2D2D32] text-white px-4 py-2.5 rounded-md border border-[#2D2D32] flex items-center transition-all duration-200\">\n                      <Repeat className=\"w-5 h-5 mr-2\" />\n                      Next Suggestion ({currentSuggestionIndex + 1}/{suggestions.length})\n                    </button>\n                  </div>}\n                \n                <div className=\"flex justify-between items-center\">\n                  <div className=\"text-sm text-gray-400 bg-[#1F1F22] px-3 py-1.5 rounded-md border border-[#2D2D32]\">\n                    {280 - userPost.length} characters remaining\n                  </div>\n                  <button onClick={copyToClipboard} className=\"bg-[#2196F3] hover:bg-[#1E88E5] text-white px-4 py-2.5 rounded-md flex items-center transition-all duration-200\">\n                    {copied ? 'Copied!' : 'Copy to Clipboard'}\n                  </button>\n                </div>\n              </>}\n          </div>}\n      </main>\n\n      {insufficientCredits && <div className=\"fixed top-24 left-1/2 transform -translate-x-1/2 z-50 bg-[#1F1F22] border border-red-500 text-white px-6 py-3 rounded-md shadow-lg flex items-center\">\n          <AlertCircle className=\"w-5 h-5 text-red-500 mr-2\" />\n          <span>Insufficient credits. Please purchase more.</span>\n        </div>}\n      \n      {showPurchaseModal && <div className=\"fixed inset-0 bg-black/70 flex items-center justify-center z-50\">\n          <div className=\"bg-[#18181B] border border-[#27272A] rounded-xl p-6 max-w-md w-full\">\n            <div className=\"flex justify-between items-center mb-6\">\n              <h2 className=\"text-xl font-medium text-white\">Purchase Credits</h2>\n              <button onClick={() => setShowPurchaseModal(false)} className=\"text-gray-400 hover:text-white transition-colors duration-200\">\n                <X className=\"w-5 h-5\" />\n              </button>\n            </div>\n            \n            <div className=\"bg-[#1F1F22] border border-[#2D2D32] rounded-md p-5 mb-6\">\n              <div className=\"flex justify-between items-center mb-4\">\n                <div className=\"flex items-center\">\n                  <div className=\"h-10 w-10 rounded-md bg-gradient-to-br from-[#3949AB] to-[#2196F3] flex items-center justify-center mr-3\">\n                    <Coins className=\"text-white w-5 h-5\" />\n                  </div>\n                  <div>\n                    <h3 className=\"text-white font-medium\">100 Credits</h3>\n                    <p className=\"text-gray-400 text-sm\">For API calls</p>\n                  </div>\n                </div>\n                <div className=\"text-white font-medium\">\n                  0.001 SOL\n                </div>\n              </div>\n              \n              <div className=\"border-t border-[#2D2D32] pt-4\">\n                <div className=\"flex justify-between text-sm mb-1\">\n                  <span className=\"text-gray-400\">Current balance</span>\n                  <span className=\"text-white\">{credits} credits</span>\n                </div>\n                <div className=\"flex justify-between text-sm\">\n                  <span className=\"text-gray-400\">After purchase</span>\n                  <span className=\"text-white\">{credits + 100} credits</span>\n                </div>\n              </div>\n            </div>\n            \n            <div className=\"text-sm text-gray-400 mb-6\">\n              <div className=\"flex items-start mb-2\">\n                <div className=\"bg-[#2D2D32] rounded-full h-5 w-5 flex items-center justify-center mr-2 mt-0.5\">\n                  <span className=\"text-xs text-white\">1</span>\n                </div>\n                <p>Each API call (Refresh, Summarize, Craft Post) costs 10 credits</p>\n              </div>\n              <div className=\"flex items-start\">\n                <div className=\"bg-[#2D2D32] rounded-full h-5 w-5 flex items-center justify-center mr-2 mt-0.5\">\n                  <span className=\"text-xs text-white\">2</span>\n                </div>\n                <p>Your purchase helps maintain the Twitter APIs and improve the service</p>\n              </div>\n            </div>\n            \n            <button onClick={purchaseCredits} disabled={purchaseLoading} className={`w-full bg-[#2196F3] hover:bg-[#1E88E5] text-white px-4 py-3 rounded-md flex items-center justify-center transition-all duration-200 ${purchaseLoading ? 'opacity-70 cursor-not-allowed' : ''}`}>\n              {purchaseLoading ? <>\n                  <RefreshCw className=\"w-5 h-5 mr-2 animate-spin\" />\n                  Processing...\n                </> : <>\n                  <CreditCard className=\"w-5 h-5 mr-2\" />\n                  Purchase Now\n                </>}\n            </button>\n          </div>\n        </div>}\n\n      <footer className=\"mt-16 bg-[#0F0F10] border-t border-[#1F1F22] py-6\">\n        <div className=\"container mx-auto px-6 text-center text-gray-500 text-sm\">\n          <p>© 2025 tweet.fun - Surf the Twitter zeitgeist without drowning in the noise!</p>\n        </div>\n      </footer>\n\n      <style jsx global>{`\n        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');\n        \n        body {\n          font-family: 'Inter', sans-serif;\n        }\n        \n        .custom-scrollbar::-webkit-scrollbar {\n          width: 6px;\n        }\n        .custom-scrollbar::-webkit-scrollbar-track {\n          background: rgba(31, 31, 34, 0.2);\n          border-radius: 6px;\n        }\n        .custom-scrollbar::-webkit-scrollbar-thumb {\n          background: rgba(33, 150, 243, 0.4);\n          border-radius: 6px;\n        }\n        .custom-scrollbar::-webkit-scrollbar-thumb:hover {\n          background: rgba(33, 150, 243, 0.6);\n        }\n      `}</style>\n    </div>;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"lucide-react\":\"0.441.0\",\"@devfunlabs/web-sdk\":\"0.5.5\",\"zod\":\"3.22.4\",\"react-router-dom\":\"6.18.0\",\"recharts\":\"2.8.0\"}}","appFunctions",[],"token","upstreamApp","isLordOfDev","analytics",[84,88,90,92,94,96,98,100,102,104,106,108,110,112],{"_85":86,"_87":60},"day","2025-09-24","runCount",{"_85":89,"_87":60},"2025-09-25",{"_85":91,"_87":60},"2025-09-26",{"_85":93,"_87":60},"2025-09-27",{"_85":95,"_87":60},"2025-09-28",{"_85":97,"_87":60},"2025-09-29",{"_85":99,"_87":60},"2025-09-30",{"_85":101,"_87":60},"2025-10-01",{"_85":103,"_87":60},"2025-10-02",{"_85":105,"_87":60},"2025-10-03",{"_85":107,"_87":60},"2025-10-04",{"_85":109,"_87":60},"2025-10-05",{"_85":111,"_87":60},"2025-10-06",{"_85":113,"_87":60},"2025-10-07","snapshot","ogImage","https://cdn.dev.fun/og/image/4e36a4307bf9f78333d5/8c1f40af.webp","isDevbase","project",{"_14":19,"_120":-5,"_20":21,"_121":122,"_22":23},"image","oneliner","Twitter trends & responses","commitDetail","livestream","actionData","errors"]
</article></body></html>