Email preview

"use client";
import * as React from "react";
import { MessageSquare } from "lucide-react";
import { EmailPreview } from "@/components/ui/notchset/blocks/email-preview";

export default function EmailPreviewDemo() {
  const [mail, setMail] = React.useState("receipt");
  return (
    <EmailPreview
      value={mail}
      onValueChange={setMail}
      from={{ name: "Notchset billing", email: "billing@notchset.com", logo: <MessageSquare className="size-3.5" /> }}
      to="ana@notchset.com"
      foot="Notchset B.V. · Wilhelminakade 91, Rotterdam"
      mails={[
        { key: "receipt", name: "Receipt", subject: "Your receipt for Oct 1", body: "We charged $384.00 to your card ending 4242 for Growth, 8 seats.", facts: [["Invoice", "INV-2026-010"], ["Paid", "Oct 1"], ["Amount", "$384.00"]], cta: "View invoice" },
        { key: "failed", name: "Payment failed", subject: "Your payment didn’t go through", body: "Your bank declined $384.00 on your card ending 4242. We’ll try again in 3 days. Nothing is deleted.", facts: [["Amount", "$384.00"], ["Read-only from", "Oct 15"]], cta: "Update card" },
        { key: "trial", name: "Trial ending", subject: "Your trial ends in 3 days", body: "Add a card to keep Growth. If you don’t, the workspace moves to Starter on Oct 26 and nothing is deleted.", facts: [["Trial ends", "Oct 26"], ["Then", "$48 a seat a month"]], cta: "Add a card" },
      ]}
    />
  );
}