53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import { SmartToySharp, Lock } from "@suid/icons-material";
|
|
import { formatRelative } from "date-fns";
|
|
import type { mastodon } from "masto";
|
|
import { createRenderEffect, Show, splitProps, type JSX } from "solid-js";
|
|
import Img from "~material/Img";
|
|
import { Body2 } from "~material/typography";
|
|
import { useAppLocale } from "~platform/i18n";
|
|
import { resolveCustomEmoji } from "../../masto/toot";
|
|
import "./TootAuthorGroup.css";
|
|
|
|
function TootAuthorGroup(
|
|
props: {
|
|
status: mastodon.v1.Status;
|
|
now: Date;
|
|
} & JSX.HTMLElementTags["div"],
|
|
) {
|
|
const [managed, rest] = splitProps(props, ["status", "now"]);
|
|
const toot = () => managed.status;
|
|
const { dateFn: dateFnLocale } = useAppLocale();
|
|
|
|
return (
|
|
<div class="TootAuthorGroup card-gut card-pad" {...rest}>
|
|
<Img src={toot().account.avatar} class="avatar" />
|
|
<div class="name-grp">
|
|
<div class="name-primary">
|
|
<Show when={toot().account.bot}>
|
|
<SmartToySharp class="acct-mark" aria-label="Bot" />
|
|
</Show>
|
|
<Show when={toot().account.locked}>
|
|
<Lock class="acct-mark" aria-label="Locked" />
|
|
</Show>
|
|
<Body2
|
|
component="span"
|
|
innerHTML={resolveCustomEmoji(
|
|
toot().account.displayName,
|
|
toot().account.emojis,
|
|
)}
|
|
/>
|
|
</div>
|
|
<time datetime={toot().createdAt}>
|
|
{formatRelative(toot().createdAt, managed.now, {
|
|
locale: dateFnLocale(),
|
|
})}
|
|
</time>
|
|
<span>
|
|
@{toot().account.username}@{new URL(toot().account.url).hostname}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default TootAuthorGroup;
|