things are looking pretty good

html/this-post-is-two-posts.tsx

@@ -1,4 +1,5 @@
-import { Main, render_and_copy } from "./common.tsx";
+import { ComponentChildren } from "preact";
+import { Main, mk_class_wrapper, render_and_copy } from "./common.tsx";
 
 // i heard you liked posts, so i put a post in your post so you can post while you post
 const ReblogIcon = () => (
@@ -17,6 +18,14 @@ const LikeIcon = () => (
     />
 );
 
+const OptionsIcon = () => (
+    <img
+        src="https://static.pyrope.net/cohost-post-options.png"
+        alt="the cohost icon for post options"
+        class="options"
+    />
+);
+
 const Bottom = ({ n_comments }: { n_comments: number }) => (
     <div class="bottom">
         <div class="bottom-inner">
@@ -32,10 +41,73 @@ const Bottom = ({ n_comments }: { n_comments: number }) => (
     </div>
 );
 
-render_and_copy(
-    <Main>
-        bla bla post content
-        <hr />
-        <Bottom n_comments={413} />
-    </Main>
+const Content = ({
+    children,
+    id,
+}: {
+    children?: ComponentChildren;
+    id?: string;
+}) => (
+    <div class="content" id={id ? id : ""}>
+        {children}
+    </div>
+);
+
+const Middle = mk_class_wrapper("middle");
+
+// no reblog sorry :(
+const Top = ({
+    display_name,
+    username,
+    link,
+    posted,
+}: {
+    display_name?: string;
+    username: string;
+    posted: string;
+    link: string;
+    id?: string;
+}) => (
+    <div class="top">
+        <div class="top-info">
+            {display_name && (
+                <a href={`https://cohost.org/${username}`} class="display-name">
+                    {display_name}
+                </a>
+            )}
+            <a href={`https://cohost.org/${username}`} class="username">
+                @{username}
+            </a>
+            <a href={link} class="posted">
+                {posted}
+            </a>
+        </div>
+        <OptionsIcon />
+    </div>
+);
+
+const Hrish = () => (
+    <div class="hrish">
+        <hr />
+    </div>
+);
+
+// mainly used this as my reference lol https://cohost.org/kokoscript/post/2141494-that-time-logitech-t
+render_and_copy(
+    <>
+        <div id="fake-main"></div>
+        <Main>
+            <Content id="post-1">homestuck etc bla bla bla</Content>
+            <Hrish />
+            <Bottom n_comments={413} />
+            <Middle />
+            <Top
+                display_name="why am i doing"
+                username="mehbark"
+                posted="42 minutes ago"
+                link="https://example.com"
+            />
+            <Content id="post-2">homestuck^2 etc bla bla bla</Content>
+        </Main>
+    </>
 );