smaller trending hashtags listing

packages/app/src/Element/TrendingHashtags.tsx

@@ -5,8 +5,10 @@ import NostrBandApi from "@/External/NostrBand";
 import { ErrorOrOffline } from "./ErrorOrOffline";
 import { HashTagHeader } from "@/Pages/HashTagsPage";
 import { useLocale } from "@/IntlProvider";
+import classNames from "classnames";
+import {Link} from "react-router-dom";
 
-export default function TrendingHashtags({ title, count = Infinity }: { title?: ReactNode; count?: number }) {
+export default function TrendingHashtags({ title, count = Infinity, short }: { title?: ReactNode; count?: number, short?: boolean }) {
   const [hashtags, setHashtags] = useState<Array<{ hashtag: string; posts: number }>>();
   const [error, setError] = useState<Error>();
   const { lang } = useLocale();
@@ -31,9 +33,22 @@ export default function TrendingHashtags({ title, count = Infinity }: { title?:
   return (
     <>
       {title}
-      {hashtags.map(a => (
-        <HashTagHeader tag={a.hashtag} events={a.posts} className="bb p" />
-      ))}
+      {hashtags.map(a => {
+        if (short) {
+          // return just the hashtag (not HashTagHeader) and post count
+          return (
+            <div className="my-1 font-bold" key={a.hashtag}>
+              <Link to={`/t/${a.hashtag}`} key={a.hashtag}>
+                #{a.hashtag}
+              </Link>
+            </div>
+          );
+        } else {
+          return (
+            <HashTagHeader tag={a.hashtag} events={a.posts} className={classNames("bb", { p: !short })} />
+          );
+        }
+      })}
     </>
   );
 }

packages/app/src/Pages/Layout/RightColumn.tsx

@@ -15,7 +15,7 @@ export default function RightColumn() {
           <div className="font-bold text-lg">
             <FormattedMessage defaultMessage="Trending hashtags" id="CbM2hK" />
           </div>
-          <TrendingHashtags count={5} />
+          <TrendingHashtags short={true} count={5} />
         </div>
         <div className="bg-superdark rounded-lg p-2 mt-8">
           <div className="font-bold text-lg">