54 lines
1.9 KiB
TypeScript
54 lines
1.9 KiB
TypeScript
|
import type { ComponentType } from "react";
|
||
|
|
import type { Post } from "../../types/post";
|
||
|
|
import { useI18n } from "../../i18n";
|
||
|
|
import { TextBubble } from "./bubbles/TextBubble";
|
||
|
|
import { FileDocBubble } from "./bubbles/FileDocBubble";
|
||
|
|
import { ImageBubble } from "./bubbles/ImageBubble";
|
||
|
|
import { ImageWithTextBubble } from "./bubbles/ImageWithTextBubble";
|
||
|
|
import { AlbumBubble } from "./bubbles/AlbumBubble";
|
||
|
|
import { VideoBubble } from "./bubbles/VideoBubble";
|
||
|
|
import { formatDateTime } from "./utils/formatTime";
|
||
|
|
|
||
|
|
type BubbleComponent = ComponentType<{ post: Post }>;
|
||
|
|
|
||
|
|
export function pickBubble(post: Post): BubbleComponent {
|
||
|
|
const a = post.attachments;
|
||
|
|
if (a.length === 0) return TextBubble;
|
||
|
|
if (a.length >= 2 && a.every((x) => x.kind === "image")) return AlbumBubble;
|
||
|
|
const only = a[0];
|
||
|
|
if (only.kind === "video") return VideoBubble;
|
||
|
|
if (only.kind === "image") {
|
||
|
|
return post.text ? ImageWithTextBubble : ImageBubble;
|
||
|
|
}
|
||
|
|
return FileDocBubble;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function MessageBubble({ post }: { post: Post }) {
|
||
|
|
const { lang } = useI18n();
|
||
|
|
const Bubble = pickBubble(post);
|
||
|
|
const isTextOnly = post.attachments.length === 0;
|
||
|
|
const isVisual = post.attachments.some(
|
||
|
|
(a) => a.kind === "image" || a.kind === "video",
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<article
|
||
|
|
id={`post-${post.id}`}
|
||
|
|
className={`relative self-start rounded-2xl bg-ark-panel text-left shadow-sm ${
|
||
|
|
isVisual
|
||
|
|
? "w-[82vw] max-w-[320px] md:w-[52vw] md:max-w-[420px] lg:w-[46vw] lg:max-w-[520px]"
|
||
|
|
: "inline-block max-w-[92%] md:max-w-[680px]"
|
||
|
|
} ${isTextOnly ? "px-3 py-2" : "p-2"}`}
|
||
|
|
>
|
||
|
|
<Bubble post={post} />
|
||
|
|
<time
|
||
|
|
dateTime={post.publishedAt}
|
||
|
|
className="ml-2 mt-1 inline-block float-right text-[10.5px] leading-none text-neutral-500"
|
||
|
|
>
|
||
|
|
{formatDateTime(post.publishedAt, lang)}
|
||
|
|
</time>
|
||
|
|
<span className="block clear-both" />
|
||
|
|
</article>
|
||
|
|
);
|
||
|
|
}
|