one post: never gonna get this small enough :(

This commit is contained in:
mehbark 2023-09-30 15:50:47 -04:00
parent 4eef51001c
commit 03a1d1f5e4
2 changed files with 50 additions and 52 deletions

View file

@ -13,6 +13,7 @@ export const Post = ({
posted,
link,
id,
alt_text = true,
}: {
children?: ComponentChildren;
@ -25,6 +26,7 @@ export const Post = ({
posted: string;
link?: string;
id?: string;
alt_text?: boolean;
}) => (
<div class="post">
<Top
@ -33,6 +35,7 @@ export const Post = ({
posted={posted}
link={link}
id={id}
alt_text={alt_text}
/>
<Hrish />
<div class="post-inner">
@ -48,7 +51,7 @@ export const Post = ({
</div>
</div>
<Hrish />
<Bottom n_comments={n_comments} />
<Bottom n_comments={n_comments} alt_text={alt_text} />
</div>
);
@ -59,34 +62,9 @@ render_and_copy(
username="mehbark"
posted="6 hr. ago"
n_comments={2}
alt_text={false}
>
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>
);

View file

@ -2,31 +2,49 @@ 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 = () => (
const ReblogIcon = ({ alt_text = true }: { alt_text?: boolean }) =>
alt_text ? (
<img
src="https://static.pyrope.net/cohost-reblog.png"
alt="the cohost reblog icon"
class="reblog"
/>
) : (
<img src="https://static.pyrope.net/cohost-reblog.png" class="reblog" />
);
const LikeIcon = () => (
const LikeIcon = ({ alt_text = true }: { alt_text?: boolean }) =>
alt_text ? (
<img
src="https://static.pyrope.net/cohost-like.png"
alt="the cohost like icon"
class="like"
/>
) : (
<img src="https://static.pyrope.net/cohost-like.png" class="like" />
);
const OptionsIcon = () => (
const OptionsIcon = ({ alt_text = true }: { alt_text?: boolean }) =>
alt_text ? (
<img
src="https://static.pyrope.net/cohost-post-options.png"
alt="the cohost icon for post options"
class="options"
/>
) : (
<img
src="https://static.pyrope.net/cohost-post-options.png"
class="options"
/>
);
export const Bottom = ({ n_comments }: { n_comments: number }) => (
export const Bottom = ({
n_comments,
alt_text = true,
}: {
n_comments: number;
alt_text?: boolean;
}) => (
<div class="bottom">
<div class="bottom-inner">
<a
@ -34,8 +52,8 @@ export const Bottom = ({ n_comments }: { n_comments: number }) => (
href="https://413.gay"
>{`${n_comments} comments`}</a>
<div class="interactions">
<ReblogIcon />
<LikeIcon />
<ReblogIcon alt_text={alt_text} />
<LikeIcon alt_text={alt_text} />
</div>
</div>
</div>
@ -61,12 +79,14 @@ export const Top = ({
username,
link,
posted,
alt_text = true,
}: {
display_name?: string;
username: string;
posted: string;
link?: string;
id?: string;
alt_text?: boolean;
}) => (
<div class="top">
<div class="top-info">
@ -82,7 +102,7 @@ export const Top = ({
{posted}
</a>
</div>
<OptionsIcon />
<OptionsIcon alt_text={alt_text} />
</div>
);