feat: trending hashtags

packages/app/src/Element/RootTabs.tsx

@@ -78,6 +78,17 @@ export function RootTabs({ base }: { base?: string }) {
         </>
       ),
     },
+    {
+      tab: "trending-hashtags",
+      path: `${base}/trending/hashtags`,
+      show: true,
+      element: (
+        <>
+          <Icon name="hash" />
+          <FormattedMessage defaultMessage="Trending Hashtags" />
+        </>
+      ),
+    },
     {
       tab: "global",
       path: `${base}/global`,

packages/app/src/Element/TrendingHashtags.tsx

@@ -0,0 +1,35 @@
+import { ReactNode, useEffect, useState } from "react";
+
+import PageSpinner from "Element/PageSpinner";
+import NostrBandApi from "External/NostrBand";
+import { ErrorOrOffline } from "./ErrorOrOffline";
+import { HashTagHeader } from "Pages/HashTagsPage";
+import { useLocale } from "IntlProvider";
+
+export default function TrendingHashtags({ title }: { title?: ReactNode }) {
+    const [hashtags, setHashtags] = useState<string[]>();
+    const [error, setError] = useState<Error>();
+    const { lang } = useLocale();
+
+    async function loadTrendingHashtags() {
+        const api = new NostrBandApi();
+        const rsp = await api.trendingHashtags(lang);
+        setHashtags(rsp.hashtags);
+    }
+
+    useEffect(() => {
+        loadTrendingHashtags().catch(e => {
+            if (e instanceof Error) {
+                setError(e);
+            }
+        });
+    }, []);
+
+    if (error) return <ErrorOrOffline error={error} onRetry={loadTrendingHashtags} className="p" />;
+    if (!hashtags) return <PageSpinner />;
+
+    return <>
+        {title}
+        {hashtags.map(a => <HashTagHeader tag={a} className="bb p" />)}
+    </>
+}