Purchase receipt

import { renderGenerativeUI } from "@assistant-ui/react-generative-ui";

<div data-aui-theme="elements">
  {renderGenerativeUI(spec, library, { status: "done" })}
</div>

{
  "$type": "Card",
  "children": [
    {
      "$type": "Badge",
      "$key": "status",
      "value": "Purchase complete",
      "variant": "success",
      "children": {
        "$type": "Icon",
        "name": "check",
        "size": "sm"
      }
    },
    {
      "$type": "Row",
      "$key": "product",
      "gap": 3,
      "align": "center",
      "children": [
        {
          "$type": "Image",
          "$key": "thumb",
          "src": "https://images.unsplash.com/photo-1587829741301-dc798b83add3?w=640&q=80",
          "alt": "Mechanical keyboard",
          "size": "sm"
        },
        {
          "$type": "Col",
          "$key": "info",
          "gap": 0,
          "children": [
            {
              "$type": "Text",
              "$key": "title",
              "value": "Mechanical Keyboard, Tactile",
              "weight": "medium"
            },
            {
              "$type": "Caption",
              "$key": "qty",
              "value": "Qty 1"
            }
          ]
        }
      ]
    },
    {
      "$type": "Divider",
      "$key": "divider"
    },
    {
      "$type": "Col",
      "$key": "facts",
      "gap": 2,
      "children": [
        {
          "$type": "Fact",
          "$key": "delivery",
          "label": "Estimated delivery",
          "value": "July 29 to August 1"
        },
        {
          "$type": "Fact",
          "$key": "seller",
          "label": "Sold by",
          "value": "Northwind Supply Co."
        },
        {
          "$type": "Fact",
          "$key": "paid",
          "label": "Paid",
          "value": "$149.00"
        }
      ]
    },
    {
      "$type": "Button",
      "$key": "details",
      "label": "View details",
      "buttonStyle": "outline",
      "$action": {
        "type": "view_order_details"
      }
    }
  ]
}