{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-message-3","type":"registry:block","title":"Sender name and delivery status","description":"Header for identity, footer for status, and how each one picks its side.","dependencies":[],"registryDependencies":["bubble","message"],"files":[{"path":"c-message-3.tsx","type":"registry:block","content":"import { Bubble, BubbleContent } from \"@/components/ui/bubble\"\nimport {\n  Message,\n  MessageContent,\n  MessageFooter,\n  MessageHeader,\n} from \"@/components/ui/message\"\n\n/*\n * The two metadata slots pick their side differently: MessageHeader stays\n * where the content starts whatever the row does, while MessageFooter follows\n * the row to the end. Both inherit the bubble's horizontal padding.\n */\nexport function Pattern() {\n  return (\n    <div className=\"mx-auto flex w-full max-w-sm flex-col gap-7\">\n      <Message>\n        <MessageContent>\n          {/*\n            The primitive ships no gap, so a header built from more than one\n            node supplies its own. The separator is a decorative dot rather than a\n            typographic interpunct, and aria-hidden so the row is announced as\n            \"Emma Wilson 09:38\".\n          */}\n          <MessageHeader className=\"gap-1.5\">\n            Emma Wilson\n            <span\n              aria-hidden=\"true\"\n              className=\"bg-muted-foreground/40 size-1 shrink-0 rounded-full\"\n            />\n            <span className=\"tabular-nums\">09:38</span>\n          </MessageHeader>\n          <Bubble variant=\"muted\">\n            <BubbleContent>\n              The invoice template is missing the VAT line on EU orders.\n            </BubbleContent>\n          </Bubble>\n        </MessageContent>\n      </Message>\n\n      <Message align=\"end\">\n        <MessageContent>\n          <Bubble>\n            <BubbleContent>\n              Fixed on the 4.2 branch. It ships with tonight&apos;s release.\n            </BubbleContent>\n          </Bubble>\n          <MessageFooter>Read 09:41</MessageFooter>\n        </MessageContent>\n      </Message>\n\n      <Message>\n        <MessageContent>\n          <MessageHeader className=\"gap-1.5\">\n            Emma Wilson\n            <span\n              aria-hidden=\"true\"\n              className=\"bg-muted-foreground/40 size-1 shrink-0 rounded-full\"\n            />\n            <span className=\"tabular-nums\">09:42</span>\n          </MessageHeader>\n          <Bubble variant=\"muted\">\n            <BubbleContent>\n              Then I will re-run the January batch once it is out.\n            </BubbleContent>\n          </Bubble>\n          <MessageFooter className=\"gap-1.5\">\n            <span>Edited</span>\n            <span\n              aria-hidden=\"true\"\n              className=\"bg-muted-foreground/40 size-1 shrink-0 rounded-full\"\n            />\n            <span className=\"tabular-nums\">09:44</span>\n          </MessageFooter>\n        </MessageContent>\n      </Message>\n    </div>\n  )\n}","target":"components/examples/c-message-3.tsx"}],"meta":{"order":3,"gridSize":2}}