1 files changed, 24 insertions, 3 deletions
diff --git a/vnext/src/App.js b/vnext/src/App.js
index e6798b31..4e235c46 100644
--- a/vnext/src/App.js
+++ b/vnext/src/App.js
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, Fragment } from 'react';
 import { Route, Link, Routes } from 'react-router-dom';
 import qs from 'qs';
 
@@ -17,16 +17,21 @@ import Login from './ui/Login';
 
 import { useCookies } from 'react-cookie';
 
-import { me } from './api';
+import { me, trends } from './api';
 
 /**
- *
+ * 
+ * @param {import('react').PropsWithChildren<{}> & {
+ * footer: string
+ * }} props props
  */
 export default function App({ footer }) {
 
   let contentRef = useRef(null);
   const [cookie, setCookie] = useCookies(['hash']);
 
+  const [allTrends, setAllTrends] = useState([]);
+
   useEffect(() => {
     svg4everybody();
     let params = qs.parse(window.location.search.substring(1));
@@ -91,6 +96,13 @@ export default function App({ footer }) {
     });
   }, [hash]);
 
+  useEffect(() => {
+    const getTrends = async () => { 
+      setAllTrends(await trends()); 
+    };
+    getTrends();
+  }, []);
+
   /**
    * @param {import("./api").SecureUser} visitor
    */
@@ -127,6 +139,15 @@ export default function App({ footer }) {
                   <span className="desktop">Settings</span>
                 </Link>
               </>)}
+              <div className="tags desktop">
+                <h4>Trends</h4>
+                { allTrends.map((it, index) => (
+                    <Fragment key={it.tag}>
+                        {index > 0 && ' '}
+                        <Link to={`/tag/${it.tag}`}>#{it.tag}</Link>
+                    </Fragment>
+                )) }
+              </div>
               <div id="footer" className="desktop">
                 <div id="footer-left">juick.com &copy; 2008-2022
                   {footer && (<><br />Sponsors: <span dangerouslySetInnerHTML={{ __html: footer }}></span></>)}</div>