cohost/html/this-post-is-two-posts.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 = () => (
    <img
        src="https://static.pyrope.net/cohost-reblog.png"
        alt="the cohost reblog icon"
        class="reblog"
    />
);

const LikeIcon = () => (
    <img
        src="https://static.pyrope.net/cohost-like.png"
        alt="the cohost like icon"
        class="like"
    />
);

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">
            <a
                class="comments"
                href="https://413.gay"
            >{`${n_comments} comments`}</a>
            <div class="interactions">
                <ReblogIcon />
                <LikeIcon />
            </div>
        </div>
    </div>
);

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
// ughhhh i should probably do tags but i'm not going to because i can
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="evil mehbark"
                username="mehbark"
                posted="42 minutes ago"
                link="https://example.com"
            />
            <Content id="post-2">homestuck^2 etc bla bla bla</Content>
        </Main>
    </>
);