cohost/html/one-post.tsx

import { ComponentChildren } from "preact";
import { render_and_copy } from "./common.tsx";
import { Top, Bottom, Hrish } from "./this-post-is-two-posts.tsx";

// this would be a funny time to do multiple posts

export const Post = ({
    children,
    headline,
    n_comments,
    display_name,
    username,
    posted,
    link,
    id,
}: {
    children?: ComponentChildren;

    headline?: string;

    n_comments: number;

    display_name?: string;
    username: string;
    posted: string;
    link?: string;
    id?: string;
}) => (
    <div class="post">
        <Top
            display_name={display_name}
            username={username}
            posted={posted}
            link={link}
            id={id}
        />
        <Hrish />
        <div class="post-inner">
            {headline && (
                <div class="headline">
                    <a href={link}>
                        <h1>{headline}</h1>
                    </a>
                </div>
            )}
            <div style="display: flex;">
                <div class="post-content">{children}</div>
            </div>
        </div>
        <Hrish />
        <Bottom n_comments={n_comments} />
    </div>
);

render_and_copy(
    <div class="posts">
        <Post
            headline="can i have more than one post please"
            username="mehbark"
            posted="6 hr. ago"
            n_comments={2}
        >
            one post isn't really enough for me
        </Post>
        <Post
            headline="@onepost says"
            username="onepost"
            display_name="one post per user"
            posted="6 hr. ago"
            n_comments={1}
        >
            i don't really make the rules i'm just a bot
        </Post>
        <Post
            headline="@onepost says"
            username="onepost"
            display_name="one post per user"
            posted="5 hr. ago"
            n_comments={11}
        >
            wait a minute! i didn't say that! you're putting posts in my mouth!
        </Post>
        <Post
            headline="my bad"
            username="mehbark"
            posted="3 hr. ago"
            n_comments={0}
        >
            happens all the time. nothing personal, kid.
        </Post>
    </div>
);