Something went wrong. Try again.
leaflet fork for copy edit / bug fixes forked from leaflet.pub/leaflet
Something went wrong. Try again.
1.4 kB · 42 lines
TSX
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243"use client";
import { Avatar } from "components/Avatar";import { useRecordFromDid } from "src/utils/useRecordFromDid";
// The full shape of a comment message — an avatar + author name header row// and the content below it — shared by rendered messages and the composer,// so a comment keeps the same layout whether it's being read, drafted, or// edited in place.export function EditorCommentMessageLayout(props: { did?: string | null; // date / action buttons at the end of the header row headerActions?: React.ReactNode; className?: string; children: React.ReactNode;}) { let { data: profile } = useRecordFromDid(props.did ?? undefined); return ( <div className={`editor-comment-message flex flex-col gap-0.5 ${props.className ?? ""}`} > <div className="flex gap-1 items-center min-w-0"> <Avatar src={profile?.avatar} displayName={profile?.displayName || profile?.handle} size="tiny" /> <div className="font-bold text-sm text-secondary truncate min-w-0 "> {profile?.displayName || profile?.handle || "..."} </div>
{props.headerActions} </div> <div className="editor-comment-message-content relative text-sm text-primary pl-5" style={{ wordBreak: "break-word" }} > {props.children} </div> </div> );}