58 lines
1.8 KiB
TypeScript
58 lines
1.8 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" {...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"
|
||
|
|
ref={(e: { innerHTML: string }) => {
|
||
|
|
createRenderEffect(() => {
|
||
|
|
e.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;
|