rename board-banner to board-header, board-nav to topbar

src/components/board-header/board-header.module.css

@@ -0,0 +1,42 @@
+.content {
+  text-align: center;
+  clear: both;
+}
+
+.bannerCnt img {
+  width: 300px;
+  height: 100px;
+  border: var(--banner-image-border);
+  max-width: 100%;
+}
+
+.boardTitle {
+  font-family: var(--board-title-font-family);
+  font-size: var(--board-title-font-size);
+  font-weight: 700;
+  letter-spacing: -2px;
+  margin-top: 0;
+  color: var(--board-title-text-color);
+}
+
+.boardSubtitle {
+  font-size: var(--board-address-font-size);
+  color: var(--board-address-text-color);
+}
+
+.content hr {
+  width: 90%;
+}
+
+
+@media (max-width: 640px) {
+  .bannerCnt {
+    padding-top: 35px;
+  }
+ }
+
+ @media (min-width: 640px) {
+  .bannerCnt {
+    padding: 5px 0 2px 0;
+  }
+ }

src/components/board-header/board-header.tsx

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { useLocation, useParams } from 'react-router-dom';
+import { useAccountComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils';
+import styles from './board-header.module.css';
+import { useMultisubMetadata } from '../../hooks/use-default-subplebbits';
+
+const totalBanners = 57;
+
+const ImageBanner = () => {
+  const [imagePath] = useState(() => {
+    const randomBannerIndex = Math.floor(Math.random() * totalBanners) + 1;
+    return `/assets/banners/banner-${randomBannerIndex}.jpg`;
+  });
+
+  return <img src={imagePath} alt='' />;
+};
+
+const BoardHeader = () => {
+  const location = useLocation();
+  const params = useParams();
+
+  const isInAllView = isAllView(location.pathname);
+  const isInSubscriptionsView = isSubscriptionsView(location.pathname);
+
+  const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any });
+  const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress;
+
+  const subplebbit = useSubplebbit({ subplebbitAddress });
+  const { address, shortAddress } = subplebbit || {};
+
+  const multisubMetadata = useMultisubMetadata();
+
+  const title = isInAllView ? multisubMetadata?.title : isInSubscriptionsView ? 'Subscriptions' : subplebbit?.title;
+  const subtitle = isInAllView ? 'p/all' : isInSubscriptionsView ? 'p/subscriptions' : `p/${address}`;
+
+  return (
+    <div className={styles.content}>
+      <div className={styles.bannerCnt}>
+        <ImageBanner key={isInAllView ? 'all' : isInSubscriptionsView ? 'subscriptions' : address} />
+      </div>
+      <div className={styles.boardTitle}>{title || `p/${shortAddress}`}</div>
+      <div className={styles.boardSubtitle}>{subtitle}</div>
+      <hr />
+    </div>
+  );
+};
+
+export default BoardHeader;

src/components/board-header/index.ts

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