42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import { useI18n } from "../../../i18n";
|
|
import type { Post } from "../../../types/post";
|
|
import { useLightbox } from "../overlays/ImageLightbox";
|
|
import { autolink } from "../utils/autolink";
|
|
import { postDisplayText } from "../utils/postText";
|
|
|
|
export function ImageWithTextBubble({ post }: { post: Post }) {
|
|
const { openLightbox } = useLightbox();
|
|
const { lang } = useI18n();
|
|
const att = post.attachments[0];
|
|
const text = postDisplayText(post, lang);
|
|
if (!att) return null;
|
|
const ratio =
|
|
att.width && att.height ? `${att.width} / ${att.height}` : "4 / 3";
|
|
|
|
return (
|
|
<div className="relative overflow-hidden rounded-xl bg-black/20">
|
|
<button
|
|
type="button"
|
|
onClick={() => openLightbox([att], 0, text, post.id)}
|
|
className="block w-full"
|
|
aria-label={att.filename}
|
|
>
|
|
<img
|
|
src={att.url}
|
|
alt={att.filename}
|
|
loading="lazy"
|
|
className="block h-auto w-full"
|
|
style={{ aspectRatio: ratio }}
|
|
/>
|
|
</button>
|
|
{text ? (
|
|
<div className="bg-gradient-to-b from-ark-panel/90 to-ark-panel px-4 py-3 text-[14px] leading-snug text-neutral-100">
|
|
<div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words">
|
|
{autolink(text)}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|