feat(post): add links and media info, including embed

src/components/post/post.module.css

@@ -1,3 +1,13 @@
 .thread {
   clear: both;
+}
+
+.link a {
+  color: var(--post-link-text-color);
+  text-decoration: var(--post-link-text-decoration);
+}
+
+.link a:hover {
+  color: var(--post-link-text-color-hover);
+  text-decoration: var(--post-link-text-decoration-hover);
 }

src/components/post/post.tsx

@@ -1,13 +1,30 @@
 import { Comment } from '@plebbit/plebbit-react-hooks';
 import styles from './post.module.css';
+import useReplies from '../../hooks/use-replies';
+import { getLinkMediaInfoMemoized } from '../../lib/utils/media-utils';
 
 const Post = ({ post }: Comment) => {
   const { content, link, title } = post;
+  const replies = useReplies(post);
+  const linkMediaInfo = getLinkMediaInfoMemoized(link);
   return (
-    <div>
+    <div className={styles.thread}>
       <hr />
-      <h1>{post.title}</h1>
-      <p>{post.content}</p>
+      <div className={styles.postContainer}>
+        <div className={styles.postDesktop}>
+          {linkMediaInfo?.url && (
+            <div className={styles.link}>
+              Link:{' '}
+              <a href={linkMediaInfo?.url} target='_blank' rel='noopener noreferrer'>
+                {linkMediaInfo.url.length > 30 ? linkMediaInfo?.url.slice(0, 30) + '...' : linkMediaInfo?.url}
+              </a>{' '}
+              ({linkMediaInfo?.type})
+            </div>
+          )}
+          <div className={styles.postInfo}></div>
+          <div className={styles.postMessage}></div>
+        </div>
+      </div>
     </div>
   );
 };