feat: add board-banner

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

@@ -0,0 +1,34 @@
+.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);
+}
+
+.boardAddress {
+  padding-top: 5px;
+  font-size: smaller;
+  color: var(--board-title-text-color);
+}
+
+.content hr {
+  width: 90%;
+  /* revert to browser styling for burichan and futaba */
+  border: var(--hr-border, revert);
+  border-top: var(--hr-border-top, revert);
+  height: var(--hr-height, revert);
+}

src/components/board-banner/board-banner.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import styles from './board-banner.module.css';
+
+const totalBanners = 24;
+
+const ImageBanner = () => {
+  const [imagePath] = useState(() => {
+    const randomBannerIndex = Math.floor(Math.random() * totalBanners) + 1;
+    return `assets/banners/banner-${randomBannerIndex}.jpg`;
+  });
+
+  return <img src={imagePath} alt='banner' />;
+};
+
+const BoardBanner = () => {
+  const { subplebbitAddress } = useParams();
+  const subplebbit = useSubplebbit({ subplebbitAddress });
+  const { address, title } = subplebbit || {};
+
+  return (
+    <div className={styles.content}>
+      <div className={styles.bannerCnt}>
+        <ImageBanner key={subplebbitAddress} />
+      </div>
+      <div className={styles.boardTitle}>{title || `p/${address}`}</div>
+      {title && <div className={styles.boardAddress}>p/{address}</div>}
+      <hr />
+    </div>
+  );
+};
+
+export default BoardBanner;

src/components/board-banner/index.ts

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

src/components/board-nav/board-nav.tsx

@@ -57,7 +57,7 @@ const BoardNavMobile = ({ subplebbits, currentSubplebbit }: BoardNavProps) => {
 
 const BoardNav = () => {
   const defaultSubplebbits = useDefaultSubplebbits();
-  const subplebbitAddress = useParams().subplebbitAddress;
+  const { subplebbitAddress } = useParams();
 
   return (
     <>