added craco, initial board styling

src/components/Board.jsx

@@ -1,9 +1,65 @@
-import React from 'react';
-import { Title } from './styled/Board.styled';
+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 { useFeed } from '@plebbit/plebbit-react-hooks';
 
 const Board = () => {
+  // eslint-disable-next-line
+  const { feed, hasMore, loadMore } = useFeed(['news.eth'], 'new');
+  const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
+
+  useEffect(() => {
+    let didCancel = false;
+    fetch(
+      "https://raw.githubusercontent.com/plebbit/temporary-default-subplebbits/master/subplebbits.json",
+      { cache: "no-cache" }
+    )
+      .then((res) => res.json())
+      .then(res => {
+        if (!didCancel) {
+          setDefaultSubplebbits(res);
+        }
+      });
+    return () => {
+      didCancel = true;
+    };
+  }, []);
+
   return (
-    <Title>board</Title>
+    <Container>
+      <NavBar>
+        <>
+          {defaultSubplebbits.map(subplebbit => (
+            <span className="boardList">[
+              <a href="/board" key={subplebbit.address}>{subplebbit.title}</a>
+              ]&nbsp;
+            </span>
+          ))}
+          <span className="nav">[
+            <Link to="/">Home</Link>]&nbsp;
+          </span>
+        </>
+      </NavBar>
+      <Header>
+        <>
+          <div className="banner">
+            <img alt="plebchan" src="/banner.jpg"/>
+          </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">
+          [
+            <a href="#">Start a New Thread</a>
+          ]
+        </div>
+        <table id="post-form"></table> */}
+      </PostForm>
+    </Container>
   )
 }
 

src/components/Home.jsx

@@ -5,11 +5,6 @@ import {Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent,
 const Home = () => {
   const [defaultSubplebbits, setDefaultSubplebbits] = useState([]);
 
-  /*const setDefaultSubplebbits = await fetch(
-    'https://raw.githubusercontent.com/plebbit/temporary-default-subplebbits/master/subplebbits.json',
-    { cache: 'no-cache' }
-  ).then(res => res.json()); */
-
   useEffect(() => {
     let didCancel = false;
     fetch(
@@ -39,7 +34,7 @@ const Home = () => {
       <Page>
         <Search>
           <form>
-            <input type="text" placeholder="board.eth" />
+            <input type="text" placeholder='"board.eth" or "Qm..."' />
             <input type="submit" value="Search" />
           </form>
         </Search>

src/components/Thread.jsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { Title } from './styled/Board.styled';
 
 const Thread = () => {
   return (
-    <Title>thread</Title>
+    <h1>thread</h1>
   );
 }
 

src/components/styled/Board.styled.jsx

@@ -1,5 +1,62 @@
 import styled from 'styled-components';
 
-export const Title = styled.h1`
-  font-size: 1.5em;
+export const NavBar = styled.div`
+  font-size: 9pt;
+  color: #b86;
+  display: block;
+  margin-top: 5px;
+  
+  a {
+    font-weight: 400;
+    padding: 1px;
+    text-decoration: none;
+    color: maroon;
+  }
+
+  .nav {
+    float: right;
+  }
+`;
+
+export const Header = styled.div`
+  text-align: center;
+  clear: both;
+
+  .banner {
+    border: 1px solid #800;
+    margin: 5px auto;
+    width: 311px;
+    height: 100px;
+  }
+
+  img {
+    border: none;
+    width: 311px;
+    height: 100px;
+  }
+
+  .board-title {
+    font-family: Tahoma, sans-serif;
+    font-size: 28px;
+    font-weight: 700;
+    letter-spacing: -2px;
+    margin-top: 0;
+    color: maroon;
+  }
+
+  .board-address {
+    font-size: 9pt;
+    margin-top: 5px;
+    font-size: 9pt;
+  }
+`;
+
+export const Break = styled.hr`
+  border: none;
+  border-top: 1px solid #d9bfb7;
+  height: 0;
+`;
+
+export const PostForm = styled.div`
+
 `;