Email message

"use client";
import * as React from "react";
import { EmailMessage } from "@/components/ui/notchset/blocks/email-message";
import { Avatar } from "@/components/ui/notchset/avatar";

export default function EmailMessageDemo() {
  const [folded, setFolded] = React.useState(true);
  return (
    <div className="flex w-full max-w-[640px] flex-col gap-3">
      <EmailMessage avatar={<Avatar name="Kevin Ito" size={28} />} from="Kevin Ito" name="Kevin Ito" to="Ana Ruiz" when="Oct 16" collapsed={folded} onToggle={() => setFolded(!folded)}>
        {"Thanks for the walkthrough. Could you send the revised order form with the 2-year pricing?"}
      </EmailMessage>
      <EmailMessage avatar={<Avatar name="Ana Ruiz" size={28} />} from="Ana Ruiz" to="Kevin Ito" joined={["Priya Shah"]} when="09:40" mine>
        {"Here it is. I've also looped in Priya for the payment terms. Two changes left on our side: the liability cap and the EU data clause."}
      </EmailMessage>
    </div>
  );
}