initial threads mockup

src/components/Board.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
-import { Container, NavBar, Header, Break, PostForm, TopBar } from './styled/Board.styled';
+import { Container, NavBar, Header, Break, PostForm, TopBar, BoardForm } from './styled/Board.styled';
 import { useFeed } from '@plebbit/plebbit-react-hooks';
 
 const ImageBanner = () => {
@@ -78,6 +78,72 @@ const Board = () => {
         ]
         <hr />
       </TopBar>
+      <BoardForm id="board-form" name="board-form" action="" method="post">
+        <div className="board">
+          <div id="t" className="thread">
+            <div id="pc" className="post-container op-container">
+              <div id="p" className="post op">
+                <span id="sa">
+                <img alt="H" className="ext-button thread-hide-button" data-cmd="hide" data-id="1-test" src="./post_expand_minus.png" title="Hide thread" />
+                </span>
+                <div id="pi" className="post-info">
+                  <input type="checkbox" name="id" value="delete"></input>
+                  <span className="name-block">
+                    <span className="name">Tom</span>
+                    <span className="poster-address">
+                      (User: plebeius.eth)
+                    </span>
+                  </span>
+                  <span className="date-time" data-utc="data">2 weeks ago</span>
+                  <span className="post-number">
+                    <a href="post-link" title="Link to this post">No.</a>
+                    <a href="post-link" title="Reply to this post">00000001</a>
+                    <span>
+                      [
+                      <a className="reply-link" href="post-link">Reply</a>
+                      ]
+                    </span>
+                  </span>
+                  <a className="post-menu-button" href="#" title="Post menu" data-cmd="post-menu">▶</a>
+                  <div id="backlink-id" className="backlink">
+                      <span>
+                        <a className="quote-link" href="post-link">{'>>'}00000002</a>
+                      </span>
+                  </div>
+                  <blockquote>
+                    <span className="quote">
+                      {'>'}imagine being a pleb
+                    </span>
+                  </blockquote>
+                </div>
+              </div>
+            </div>
+            <div id="pc" className="post-container reply-container">
+              <div className="side-arrows">{'>>'}</div>
+              <div className="post-reply">
+                <div className="post-info">
+                  <input type="checkbox" name="id" value="delete"></input>
+                  <span className="nameblock">
+                    <span className="name">Anonymous</span>
+                    <span className="poster-address">
+                      (User: Qma319kE7rrHNce8vH9fAjPjihUF4EZCaKSK8dBaFtxsVn)
+                    </span>
+                  </span>
+                  <span className="date-time" data-utc="data">2 weeks ago</span>
+                  <span className="post-number">
+                    <a href="post-link" title="Link to this post">No.</a>
+                    <a href="post-link" title="Reply to this post">00000002</a>
+                  </span>
+                  <a className="post-menu-button" href="#" title="Post menu" data-cmd="post-menu">▶</a>
+                </div>
+                <blockquote className="post-message">
+                  I can imagine being a pleb
+                </blockquote>
+              </div>
+            </div>
+          </div>
+        </div>
+      </BoardForm>
     </Container>
   )
 }

src/components/styled/Board.styled.jsx

@@ -120,4 +120,113 @@ export const TopBar = styled.div`
   a:hover {
     color: red;
   }
+`;
+
+export const BoardForm = styled.form`
+  
+  .thread {
+    margin: 0;
+    clear: both;
+  }
+
+  .op-container {
+    display: inline;
+  }
+
+  .op {
+    display: inline;
+  }
+
+  .post {
+    margin: 4px 0;
+    overflow: hidden;
+  }
+
+  .ext-button {
+    float: left;
+    margin-right: 5px;
+    margin-top: -1px;
+    cursor: pointer;
+    margin-bottom: -4px;
+    width: 18px;
+    height: 18px;
+  }
+
+  img {
+    border: none;
+  }
+
+  .post-info {
+    display: block;
+    width: 100%;
+  }
+
+  .name-block {
+    display: inline-block;
+  }
+
+  .name {
+    color: #117743;
+    font-weight: 700;
+  }
+
+  .post-link a {
+    text-decoration: none;
+    color: maroon;
+  }
+
+  .post-link a:hover {
+    color: red;
+  }
+
+  .reply-link a {
+    text-decoration: none;
+    color: #00e;
+  }
+
+  .reply-link a:hover {
+    color: red;
+  }
+
+  .post-menu-button {
+    color: #000080;
+    margin-left: 5px;
+    text-decoration: none;
+    line-height: 1em;
+    display: inline-block;
+    transition: transform 0.1s;
+    width: 1em;
+    height: 1em;
+    text-align: center;
+    outline: none;
+    opacity: 0.8;
+  }
+
+  .backlink {
+    font-size: 0.8em !important;
+    display: inline;
+    padding: 0;
+    padding-left: 5px;
+  }
+
+  .quote-link a {
+    color: navy !important;
+    text-decoration: none;
+  }
+
+  .quote-link a:hover {
+    color: red;
+  }
+
+  .backlink span {
+    padding: 0;
+  }
+
+  blockquote {
+    display: block;
+  }
+
+  .quote {
+    color: #789922;
+  }
 `;