added randomized banner, fixes

src/components/Board.jsx

@@ -1,9 +1,20 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
-import { Container } from './styled/Home.styled'
-import { NavBar, Header, Break, PostForm } from './styled/Board.styled';
+import { Container, NavBar, Header, Break, PostForm, TopBar } from './styled/Board.styled';
 import { useFeed } from '@plebbit/plebbit-react-hooks';
 
+const ImageBanner = () => {
+  const [currentImage, setCurrentImage] = useState(1);
+
+  useEffect(() => {
+    setCurrentImage(Math.floor(Math.random() * 5) + 1);
+  }, []);
+
+  return (
+    <img id="banner-img" src={`banner-${currentImage}.jpg`} alt="banner" />
+  );
+};
+
 const Board = () => {
   // eslint-disable-next-line
   const { feed, hasMore, loadMore } = useFeed(['news.eth'], 'new');
@@ -31,8 +42,8 @@ const Board = () => {
       <NavBar>
         <>
           {defaultSubplebbits.map(subplebbit => (
-            <span className="boardList">[
-              <a href="/board" key={subplebbit.address}>{subplebbit.title}</a>
+            <span className="boardList" key={subplebbit.address}>[
+              <a href="/board">{subplebbit.title}</a>
               ]&nbsp;
             </span>
           ))}
@@ -44,21 +55,29 @@ const Board = () => {
       <Header>
         <>
           <div className="banner">
-            <img alt="plebchan" src="/banner.jpg"/>
+            <ImageBanner />
           </div>
           <div className="board-title">Plebs Helping Plebs</div>
           <div className="board-address">p/plebshelpingplebs.eth</div>
         </>
       </Header>
       <Break />
-      <PostForm>
-        {/* <div id="post-form-link">
+      <PostForm name="post" action="" method="post" enctype="multipart/form-data">
+        <div id="post-form-link">
           [
             <a href="#">Start a New Thread</a>
           ]
         </div>
-        <table id="post-form"></table> */}
+        <table id="post-form"></table>
       </PostForm>
+      <TopBar>
+        <hr />
+        <input id="search-box" type="text" placeholder="Search OPs…" />
+        [
+        <a href="./catalog">Catalog</a>
+        ]
+        <hr />
+      </TopBar>
     </Container>
   )
 }