Email layout

"use client"

import * as React from "react"
import { EmailPreview, renderEmail, type EmailNotice } from "@/components/email-layout"
import { Button } from "@/components/ui/button"

const notice: EmailNotice = {
  preheader: "Add region to customers is waiting for an approver on Acme web Production.",
  title: "An approval is waiting for you",
  paragraphs: ["Keel asked for approval of a migration to Acme web Production. You’re one of the people who can decide it.", "It expires in 7 days."],
  next: { kind: "command", text: "keel approval show apr_7f3a91" },
  refs: [
    { label: "Request", value: "apr_7f3a91" },
    { label: "Change hash", value: "sha256:9f2c4e81b7a0…" },
  ],
  why: "You’re getting this because you’re an approver on Acme web Production.",
}

export default function Example() {
  const [frame, setFrame] = React.useState(false)
  // renderEmail's string goes to your mailer. EmailPreview shows the same email inline; the iframe shows the exact document.
  const html = React.useMemo(() => renderEmail(notice, "Keel"), [])
  return (
    <div className="flex max-w-xl flex-col gap-3">
      <EmailPreview notice={notice} brand="Keel" className="border" />
      <Button size="sm" variant="outline" className="self-start" aria-expanded={frame} onClick={() => setFrame((o) => !o)}>
        {frame ? "Hide the HTML document" : "Show the HTML document"}
      </Button>
      {frame && <iframe title="Email document" srcDoc={html} sandbox="" className="block h-[30rem] w-full rounded-xl border bg-white" />}
    </div>
  )
}