{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "email-receipt",
  "type": "registry:component",
  "title": "Email receipt",
  "description": "A payment receipt email in a preview frame with a branded header, plan and tax line items, a bold total and a footer. A React starting point for billing mail.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/email-footer.json",
    "https://ui.minidev.pro/r/email-header.json",
    "https://ui.minidev.pro/r/email-layout.json",
    "https://ui.minidev.pro/r/email-preview-frame.json",
    "https://ui.minidev.pro/r/separator.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/email-receipt.tsx",
      "type": "registry:ui",
      "target": "components/ui/email-receipt.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { EmailPreviewFrame } from \"@/components/ui/email-preview-frame\"\nimport { EmailLayout } from \"@/components/ui/email-layout\"\nimport { EmailHeader } from \"@/components/ui/email-header\"\nimport { EmailFooter } from \"@/components/ui/email-footer\"\nimport { Separator } from \"@/components/ui/separator\"\n\nfunction EmailReceipt({ className }: { className?: string }) {\n  return (\n    <div data-slot=\"email-receipt\" data-tier=\"premium\" className={cn(className)}>\n      <EmailPreviewFrame subject=\"Receipt for Premium — $49.00\">\n        <EmailLayout>\n          <EmailHeader brand=\"MiniDev Billing\" />\n          <div className=\"space-y-4 px-6 py-6\">\n            <h1 className=\"text-xl font-medium text-fg\">Payment received</h1>\n            <p className=\"text-sm text-fg-muted\">Thanks for upgrading. Here is your receipt.</p>\n            <div className=\"rounded-xl border border-border bg-bg p-4 text-sm\">\n              <div className=\"flex justify-between\"><span className=\"text-fg-muted\">Premium</span><span className=\"tabular-nums text-fg\">$49.00</span></div>\n              <div className=\"mt-2 flex justify-between\"><span className=\"text-fg-muted\">Tax</span><span className=\"tabular-nums text-fg\">$0.00</span></div>\n              <Separator className=\"my-3\" />\n              <div className=\"flex justify-between font-medium\"><span className=\"text-fg\">Total</span><span className=\"tabular-nums text-fg\">$49.00</span></div>\n            </div>\n          </div>\n          <EmailFooter />\n        </EmailLayout>\n      </EmailPreviewFrame>\n    </div>\n  )\n}\nexport { EmailReceipt }\n"
    }
  ]
}