feat: add subplebbits component and header

src/app.tsx

@@ -13,6 +13,7 @@ import Profile from './views/profile';
 import Settings from './views/settings';
 import Submit from './views/submit';
 import Subplebbit from './views/subplebbit';
+import Subplebbits from './views/subplebbits';
 import AccountBar from './components/account-bar/';
 import ChallengeModal from './components/challenge-modal';
 import Header from './components/header';
@@ -96,6 +97,8 @@ function App() {
             <Route path='inbox/unread' element={<Inbox />} />
             <Route path='inbox/commentreplies' element={<Inbox />} />
             <Route path='inbox/postreplies' element={<Inbox />} />
+
+            <Route path='/communities' element={<Subplebbits />} />
           </Route>
         </Route>
       </Routes>

src/components/header/header.tsx

@@ -22,6 +22,7 @@ import {
   isProfileView,
   isProfileCommentsView,
   isProfileSubmittedView,
+  isSubplebbitsView,
   isUpvotedView,
 } from '../../lib/utils/view-utils';
 import useTheme from '../../hooks/use-theme';
@@ -192,6 +193,28 @@ const InboxHeaderTabs = () => {
   );
 };
 
+const SubplebbitsHeaderTabs = () => {
+  return (
+    <>
+      <li>
+        <Link to={'/communities'} className={styles.selected}>
+          homepage
+        </Link>
+      </li>
+      <li>
+        <Link to={'/communities'} className={styles.choice}>
+          proposed
+        </Link>
+      </li>
+      <li>
+        <Link to={'/communities'} className={styles.choice}>
+          my communities
+        </Link>
+      </li>
+    </>
+  );
+};
+
 const HeaderTabs = () => {
   const params = useParams();
   const location = useLocation();
@@ -204,6 +227,7 @@ const HeaderTabs = () => {
   const isProfilePage = isProfileView(location.pathname);
   const isSubplebbitPage = isSubplebbitView(location.pathname, params);
   const isSubplebbitSubmitPage = isSubplebbitSubmitView(location.pathname, params);
+  const isSubplebbitsPage = isSubplebbitsView(location.pathname);
 
   if (isPostPage) {
     return <CommentsButton />;
@@ -215,6 +239,8 @@ const HeaderTabs = () => {
     return <span className={styles.pageName}>pending</span>;
   } else if (isInboxPage) {
     return <InboxHeaderTabs />;
+  } else if (isSubplebbitsPage) {
+    return <SubplebbitsHeaderTabs />;
   }
   return null;
 };
@@ -228,10 +254,11 @@ const HeaderTitle = ({ title, shortAddress }: { title: string; shortAddress: str
   const isInboxPage = isInboxView(location.pathname);
   const isPostPage = isPostView(location.pathname, params);
   const isProfilePage = isProfileView(location.pathname);
-  const isSubplebbitPage = isSubplebbitView(location.pathname, params);
-  const isSubmitPage = isSubmitView(location.pathname);
-  const isSubplebbitSubmitPage = isSubplebbitSubmitView(location.pathname, params);
   const isSettingsPage = isSettingsView(location.pathname);
+  const isSubmitPage = isSubmitView(location.pathname);
+  const isSubplebbitPage = isSubplebbitView(location.pathname, params);
+  const isSubplebbitSubmitPage = isSubplebbitSubmitView(location.pathname, params);
+  const isSubplebbitsPage = isSubplebbitsView(location.pathname);
 
   const subplebbitTitle = <Link to={`/p/${params.subplebbitAddress}`}>{title || shortAddress}</Link>;
   const submitTitle = <span className={styles.submitTitle}>{t('submit')}</span>;
@@ -256,6 +283,8 @@ const HeaderTitle = ({ title, shortAddress }: { title: string; shortAddress: str
     return authorTitle;
   } else if (isInboxPage) {
     return t('messages');
+  } else if (isSubplebbitsPage) {
+    return 'communities';
   }
   return null;
 };

src/components/topbar/topbar.tsx

@@ -160,7 +160,7 @@ const TopBar = () => {
             ))}
           </ul>
         </div>
-        <Link to='#' className={styles.moreLink}>
+        <Link to='/communities' className={styles.moreLink}>
           {t('edit')} »
         </Link>
       </div>

src/lib/utils/view-utils.ts

@@ -106,6 +106,10 @@ export const isSubplebbitSubmitView = (pathname: string, params: ParamsType): bo
   return params.subplebbitAddress ? pathname === `/p/${params.subplebbitAddress}/submit` : false;
 };
 
+export const isSubplebbitsView = (pathname: string): boolean => {
+  return pathname.startsWith('/communities');
+};
+
 export const isUpvotedView = (pathname: string): boolean => {
   return pathname === '/profile/upvoted';
 };

src/views/subplebbits/index.ts

@@ -0,0 +1 @@
+export { default } from './subplebbits';

src/views/subplebbits/subplebbits.tsx

@@ -0,0 +1,5 @@
+const Subplebbits = () => {
+  return <div>subplebbits</div>;
+};
+
+export default Subplebbits;