[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import EmailTemplateBuilder from "@/components/email-template-builder" export default function Home() { return (

Email Template Builder

) } [V0_FILE]typescriptreact:file="components/email-builder/elements-sidebar.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useDrag } from "react-dnd" import { Button } from "@/components/ui/button" import { Type, ImageIcon, Square, SeparatorHorizontal, ArrowUpDown, Columns, Columns2, Columns3 } from "lucide-react" import type { ElementType } from "../email-template-builder" interface ElementsSidebarProps { onAddElement: (type: ElementType) => void } interface ElementButtonProps { type: ElementType icon: React.ReactNode label: string onAddElement: (type: ElementType) => void } function ElementButton({ type, icon, label, onAddElement }: ElementButtonProps) { const [{ isDragging }, drag] = useDrag(() => ({ type: "EMAIL_ELEMENT", item: { type }, end: (item, monitor) => { const didDrop = monitor.didDrop() if (didDrop) { onAddElement(type) } }, collect: (monitor) => ({ isDragging: !!monitor.isDragging(), }), })) return (

onAddElement(type)}>

) } export default function ElementsSidebar({ onAddElement }: ElementsSidebarProps) { return (

Elements

} label="Text" onAddElement={onAddElement} /> } label="Image" onAddElement={onAddElement} /> } label="Button" onAddElement={onAddElement} /> } label="Divider" onAddElement={onAddElement} /> } label="Spacer" onAddElement={onAddElement} /> } label="1 Column" onAddElement={onAddElement} /> } label="2 Columns" onAddElement={onAddElement} /> } label="3 Columns" onAddElement={onAddElement} />

) } [V0_FILE]typescriptreact:file="components/email-builder/properties-panel.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import type { EmailElement } from "../email-template-builder" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" interface PropertiesPanelProps { selectedElement: EmailElement | null onUpdateElement: (element: EmailElement) => void } export default function PropertiesPanel({ selectedElement, onUpdateElement }: PropertiesPanelProps) { const [localElement, setLocalElement] = useState(null) useEffect(() => { setLocalElement(selectedElement) }, [selectedElement]) if (!localElement) { return (

Properties

Select an element to edit its properties

) } const handlePropertyChange = (property: string, value: string) => { const updatedElement = { ...localElement, properties: { ...localElement.properties, [property]: value, }, } setLocalElement(updatedElement) onUpdateElement(updatedElement) } const handleContentChange = (value: string) => { const updatedElement = { ...localElement, content: value, } setLocalElement(updatedElement) onUpdateElement(updatedElement) } return (

Properties

Content Style {(localElement.type === "text" || localElement.type === "button") && (

Text

handleContentChange(e.target.value)}
                className="mt-1"
              />
            </div>
          )}

{localElement.type === "image" && (
            <div>
              <Label htmlFor="src">Image URL</Label>
              <Input
                id="src"
                value={localElement.properties.src || ""}
                onChange={(e) => handlePropertyChange("src", e.target.value)}
                className="mt-1"
              />
            </div>
          )}

{localElement.type === "button" && (
            <div>
              <Label htmlFor="href">Link URL</Label>
              <Input
                id="href"
                value={localElement.properties.href || ""}
                onChange={(e) => handlePropertyChange("href", e.target.value)}
                className="mt-1"
              />
            </div>
          )}
        </TabsContent>

<TabsContent value="style" className="space-y-4 pt-4">
          {(localElement.type === "text" || localElement.type === "button") && (
            <>
              <div>
                <Label htmlFor="color">Text Color</Label>
                <div className="flex gap-2 mt-1">
                  <Input
                    type="color"
                    id="color"
                    value={localElement.properties.color || "#000000"}
                    onChange={(e) => handlePropertyChange("color", e.target.value)}
                    className="w-12 h-8 p-1"
                  />
                  <Input
                    type="text"
                    value={localElement.properties.color || "#000000"}
                    onChange={(e) => handlePropertyChange("color", e.target.value)}
                    className="flex-1"
                  />
                </div>
              </div>

<div>
                <Label htmlFor="fontSize">Font Size</Label>
                <Input
                  id="fontSize"
                  value={localElement.properties.fontSize || "16px"}
                  onChange={(e) => handlePropertyChange("fontSize", e.target.value)}
                  className="mt-1"
                />
              </div>
            </>
          )}

{localElement.type === "button" && (
            <div>
              <Label htmlFor="backgroundColor">Background Color</Label>
              <div className="flex gap-2 mt-1">
                <Input
                  type="color"
                  id="backgroundColor"
                  value={localElement.properties.backgroundColor || "#007bff"}
                  onChange={(e) => handlePropertyChange("backgroundColor", e.target.value)}
                  className="w-12 h-8 p-1"
                />
                <Input
                  type="text"
                  value={localElement.properties.backgroundColor || "#007bff"}
                  onChange={(e) => handlePropertyChange("backgroundColor", e.target.value)}
                  className="flex-1"
                />
              </div>
            </div>
          )}

{(localElement.type === "text" || localElement.type === "image" || localElement.type === "button") && (
            <div>
              <Label htmlFor="align">Alignment</Label>
              <Select
                value={localElement.properties.align || "left"}
                onValueChange={(value) => handlePropertyChange("align", value)}
              >
                <SelectTrigger className="mt-1">
                  <SelectValue placeholder="Select alignment" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="left">Left</SelectItem>
                  <SelectItem value="center">Center</SelectItem>
                  <SelectItem value="right">Right</SelectItem>
                </SelectContent>
              </Select>
            </div>
          )}

{localElement.type === "image" && (
            <div>
              <Label htmlFor="width">Width</Label>
              <Input
                id="width"
                value={localElement.properties.width || "100%"}
                onChange={(e) => handlePropertyChange("width", e.target.value)}
                className="mt-1"
              />
            </div>
          )}

{localElement.type === "spacer" && (
            <div>
              <Label htmlFor="height">Height</Label>
              <Input
                id="height"
                value={localElement.properties.height || "20px"}
                onChange={(e) => handlePropertyChange("height", e.target.value)}
                className="mt-1"
              />
            </div>
          )}

{localElement.type === "divider" && (
            <>
              <div>
                <Label htmlFor="borderColor">Border Color</Label>
                <div className="flex gap-2 mt-1">
                  <Input
                    type="color"
                    id="borderColor"
                    value={localElement.properties.borderColor || "#e0e0e0"}
                    onChange={(e) => handlePropertyChange("borderColor", e.target.value)}
                    className="w-12 h-8 p-1"
                  />
                  <Input
                    type="text"
                    value={localElement.properties.borderColor || "#e0e0e0"}
                    onChange={(e) => handlePropertyChange("borderColor", e.target.value)}
                    className="flex-1"
                  />
                </div>
              </div>

<div>
                <Label htmlFor="borderWidth">Border Width</Label>
                <Input
                  id="borderWidth"
                  value={localElement.properties.borderWidth || "1px"}
                  onChange={(e) => handlePropertyChange("borderWidth", e.target.value)}
                  className="mt-1"
                />
              </div>
            </>
          )}

<div>
            <Label htmlFor="padding">Padding</Label>
            <Input
              id="padding"
              value={localElement.properties.padding || "10px"}
              onChange={(e) => handlePropertyChange("padding", e.target.value)}
              className="mt-1"
            />
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/mjml-generator.ts" isEdit="true" isQuickEdit="true"
import type { EmailElement } from "@/components/email-template-builder"

export function generateMJML(elements: EmailElement[]): string {
  // Generate the body content from all root elements
  const mjmlBody = elements.map((element) => generateMJMLElement(element, true)).join("\n")

return `<mjml>
  <mj-head>
    <mj-title>Email Template</mj-title>
    <mj-attributes>
      <mj-all font-family="Arial, sans-serif" />
      <mj-section padding="0px" />
      <mj-column padding="0px" />
      <mj-text font-size="16px" color="#000000" padding="10px" />
      <mj-image padding="10px" />
      <mj-button padding="10px" />
      <mj-divider padding="10px" />
      <mj-spacer height="20px" />
    </mj-attributes>
    <mj-style>
      .email-container { width: 100%; max-width: 600px; }
    </mj-style>
  </mj-head>
  <mj-body>
    ${mjmlBody}
  </mj-body>
</mjml>`
}

function generateMJMLElement(element: EmailElement, isRoot = false): string {
  const { type, content, properties, children } = element

// Helper function to generate attribute string
  const getAttributes = (props: Record<string, any>, allowedProps: string[]) => {
    return Object.entries(props)
      .filter(([key]) => allowedProps.includes(key))
      .map(([key, value]) => {
        // Convert some CSS properties to MJML attributes
        if (key === "backgroundColor") return `background-color="${value}"`
        if (key === "borderRadius") return `border-radius="${value}"`
        return `${key}="${value}"`
      })
      .join(" ")
  }

switch (type) {
    case "text":
      const textAttrs = getAttributes(properties, [
        "color",
        "font-size",
        "padding",
        "align",
        "font-family",
        "line-height",
      ])
      return `<mj-text ${textAttrs}>${content || ""}</mj-text>`

case "image":
      const imageAttrs = getAttributes(properties, ["src", "width", "height", "padding", "align", "alt", "href"])
      return `<mj-image ${imageAttrs} />`

case "button":
      const buttonAttrs = getAttributes(properties, [
        "backgroundColor",
        "color",
        "padding",
        "align",
        "href",
        "borderRadius",
        "font-size",
        "width",
        "height",
        "font-family",
      ])
      return `<mj-button ${buttonAttrs}>${content || "Click Me"}</mj-button>`

case "divider":
      const dividerAttrs = getAttributes(properties, ["borderColor", "borderWidth", "padding", "width"])
      return `<mj-divider ${dividerAttrs.replace("borderColor", "border-color").replace("borderWidth", "border-width")} />`

case "spacer":
      const spacerAttrs = getAttributes(properties, ["height", "padding"])
      return `<mj-spacer ${spacerAttrs} />`

case "column1":
      // For a single column, we wrap in mj-section and mj-column
      const col1SectionAttrs = getAttributes(properties, [
        "backgroundColor",
        "padding",
        "border",
        "border-radius",
        "width",
      ])
      const col1Content = children?.map((child) => generateMJMLElement(child)).join("\n") || ""

return `<mj-section ${col1SectionAttrs.replace("backgroundColor", "background-color")}>
        <mj-column>
          ${col1Content}
        </mj-column>
      </mj-section>`

case "column2":
      // For two columns, create a section with two columns
      const col2SectionAttrs = getAttributes(properties, [
        "backgroundColor",
        "padding",
        "border",
        "border-radius",
        "width",
      ])

return `<mj-section ${col2SectionAttrs.replace("backgroundColor", "background-color")}>
        <mj-column>
          ${children && children[0] ? generateMJMLElement(children[0]) : ""}
        </mj-column>
        <mj-column>
          ${children && children[1] ? generateMJMLElement(children[1]) : ""}
        </mj-column>
      </mj-section>`

case "column3":
      // For three columns, create a section with three columns
      const col3SectionAttrs = getAttributes(properties, [
        "backgroundColor",
        "padding",
        "border",
        "border-radius",
        "width",
      ])

return `<mj-section ${col3SectionAttrs.replace("backgroundColor", "background-color")}>
        <mj-column>
          ${children && children[0] ? generateMJMLElement(children[0]) : ""}
        </mj-column>
        <mj-column>
          ${children && children[1] ? generateMJMLElement(children[1]) : ""}
        </mj-column>
        <mj-column>
          ${children && children[2] ? generateMJMLElement(children[2]) : ""}
        </mj-column>
      </mj-section>`

default:
      return ""
  }
}
[V0_FILE]typescriptreact:file="components/email-builder/canvas-area.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useDrop } from "react-dnd"
import type { EmailElement } from "../email-template-builder"
import {
  Trash2,
  MoveVertical,
  Type,
  ImageIcon,
  Square,
  SeparatorHorizontal,
  ArrowUpDown,
  Columns,
  Columns2,
  Columns3,
} from "lucide-react"
import { Button } from "@/components/ui/button"

interface CanvasAreaProps {
  elements: EmailElement[]
  onSelectElement: (element: EmailElement | null) => void
  onUpdateElement: (element: EmailElement) => void
  onRemoveElement: (id: string) => void
}

export default function CanvasArea({ elements, onSelectElement, onUpdateElement, onRemoveElement }: CanvasAreaProps) {
  const [{ isOver }, drop] = useDrop(() => ({
    accept: "EMAIL_ELEMENT",
    collect: (monitor) => ({
      isOver: !!monitor.isOver(),
    }),
  }))

const getElementIcon = (type: string) => {
    switch (type) {
      case "text":
        return <Type size={16} />
      case "image":
        return <ImageIcon size={16} />
      case "button":
        return <Square size={16} />
      case "divider":
        return <SeparatorHorizontal size={16} />
      case "spacer":
        return <ArrowUpDown size={16} />
      case "column1":
        return <Columns size={16} />
      case "column2":
        return <Columns2 size={16} />
      case "column3":
        return <Columns3 size={16} />
      default:
        return <Type size={16} />
    }
  }

const renderElement = (element: EmailElement) => {
    const { id, type, content, properties, children } = element

const commonProps = {
      className: "relative border border-dashed border-gray-300 hover:border-blue-500 p-2 mb-2 group",
      onClick: (e: React.MouseEvent) => {
        e.stopPropagation()
        onSelectElement(element)
      },
      style: {
        backgroundColor: properties.backgroundColor || "transparent",
        padding: properties.padding || "10px",
        textAlign: (properties.align as any) || "left",
      },
    }

const controls = (
      <div className="absolute top-0 right-0 bg-white border border-gray-200 rounded opacity-0 group-hover:opacity-100 flex">
        <Button
          variant="ghost"
          size="icon"
          className="h-6 w-6"
          onClick={(e) => {
            e.stopPropagation()
            onRemoveElement(id)
          }}
        >
          <Trash2 size={14} />
        </Button>
        <Button variant="ghost" size="icon" className="h-6 w-6 cursor-move">
          <MoveVertical size={14} />
        </Button>
      </div>
    )

switch (type) {
      case "text":
        return (
          <div key={id} {...commonProps}>
            {controls}
            <div
              style={{
                color: properties.color || "#000000",
                fontSize: properties.fontSize || "16px",
              }}
            >
              {content}
            </div>
          </div>
        )

case "image":
        return (
          <div key={id} {...commonProps}>
            {controls}
            <div className="flex justify-center">
              <img
                src={properties.src || "/placeholder.svg?height=200&width=400"}
                alt="Email image"
                style={{
                  width: properties.width || "100%",
                  maxWidth: "100%",
                }}
              />
            </div>
          </div>
        )

case "button":
        return (
          <div key={id} {...commonProps}>
            {controls}
            <div className="flex justify-center">
              <button
                style={{
                  backgroundColor: properties.backgroundColor || "#007bff",
                  color: properties.color || "#ffffff",
                  padding: properties.padding || "10px 20px",
                  borderRadius: properties.borderRadius || "4px",
                  border: "none",
                  cursor: "pointer",
                }}
              >
                {content}
              </button>
            </div>
          </div>
        )

case "divider":
        return (
          <div key={id} {...commonProps}>
            {controls}
            <hr
              style={{
                borderTop: `${properties.borderWidth || "1px"} solid ${properties.borderColor || "#e0e0e0"}`,
                margin: "10px 0",
              }}
            />
          </div>
        )

case "spacer":
        return (
          <div key={id} {...commonProps}>
            {controls}
            <div style={{ height: properties.height || "20px" }}></div>
          </div>
        )

case "column1":
      case "column2":
      case "column3":
        const columnCount = type === "column1" ? 1 : type === "column2" ? 2 : 3
        return (
          <div key={id} {...commonProps}>
            {controls}
            <div
              className={`grid gap-4`}
              style={{
                gridTemplateColumns: `repeat(${columnCount}, 1fr)`,
                backgroundColor: properties.backgroundColor || "transparent",
              }}
            >
              {children?.map((child, index) => (
                <div key={child.id} className="border border-dotted border-gray-200 p-2">
                  {renderElement(child)}
                </div>
              ))}
            </div>
          </div>
        )

default:
        return null
    }
  }

return (
    <div
      ref={drop}
      className={`min-h-[600px] p-4 ${isOver ? "bg-blue-50" : "bg-gray-50"}`}
      onClick={() => onSelectElement(null)}
    >
      {elements.length === 0 ? (
        <div className="flex items-center justify-center h-full border-2 border-dashed border-gray-300 rounded-lg p-12 text-center">
          <div>
            <p className="text-gray-500">Drag and drop elements here or click on elements in the sidebar</p>
          </div>
        </div>
      ) : (
        elements.map((element) => renderElement(element))
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/email-builder/email-preview.tsx"
"use client"

import { useState, useEffect } from "react"
import type { EmailElement } from "../email-template-builder"
import { generateMJML } from "@/lib/mjml-generator"

interface EmailPreviewProps {
  elements: EmailElement[]
}

export default function EmailPreview({ elements }: EmailPreviewProps) {
  const [htmlContent, setHtmlContent] = useState<string>("")
  const [loading, setLoading] = useState<boolean>(false)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    const convertMjmlToHtml = async () => {
      if (elements.length === 0) {
        setHtmlContent("")
        return
      }

setLoading(true)
      setError(null)

try {
        // Generate MJML from elements
        const mjmlCode = generateMJML(elements)

// In a real application, you would send this to a server endpoint that converts MJML to HTML
        // For this demo, we'll just display the MJML in an iframe with a message
        const placeholderHtml = `
          <html>
            <head>
              <style>
                body { font-family: Arial, sans-serif; padding: 20px; }
                pre { background: #f5f5f5; padding: 15px; border-radius: 5px; overflow: auto; }
              </style>
            </head>
            <body>
              <h2>Email Preview</h2>
              <p>This is a placeholder preview. In a production environment, the MJML would be converted to HTML.</p>
              <p>Your email design has ${elements.length} elements.</p>
            </body>
          </html>
        `

setHtmlContent(placeholderHtml)
      } catch (err) {
        console.error("Error converting MJML to HTML:", err)
        setError("Failed to generate preview. Please check your template structure.")
      } finally {
        setLoading(false)
      }
    }

convertMjmlToHtml()
  }, [elements])

if (loading) {
    return (
      <div className="flex items-center justify-center h-full">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
      </div>
    )
  }

if (error) {
    return (
      <div className="flex items-center justify-center h-full">
        <div className="text-red-500">{error}</div>
      </div>
    )
  }

if (!htmlContent) {
    return (
      <div className="flex items-center justify-center h-full">
        <div className="text-gray-500">Add elements to see a preview</div>
      </div>
    )
  }

return (
    <iframe srcDoc={htmlContent} className="w-full h-full border-0" title="Email Preview" sandbox="allow-same-origin" />
  )
}
[V0_FILE]typescriptreact:file="components/email-template-builder.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useRef } from "react"
import { DndProvider } from "react-dnd"
import { HTML5Backend } from "react-dnd-html5-backend"
import ElementsSidebar from "./email-builder/elements-sidebar"
import CanvasArea from "./email-builder/canvas-area"
import PropertiesPanel from "./email-builder/properties-panel"
import { Button } from "@/components/ui/button"
import { generateMJML } from "@/lib/mjml-generator"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Textarea } from "@/components/ui/textarea"
import { Copy } from "lucide-react"
// Add import for the EmailPreview component
import EmailPreview from "./email-builder/email-preview"

export interface EmailElement {
  id: string
  type: ElementType
  content?: string
  properties: {
    backgroundColor?: string
    color?: string
    fontSize?: string
    padding?: string
    align?: "left" | "center" | "right"
    width?: string
    height?: string
    src?: string
    href?: string
    [key: string]: any
  }
  children?: EmailElement[]
}

export default function EmailTemplateBuilder() {
  const [elements, setElements] = useState<EmailElement[]>([])
  const [selectedElement, setSelectedElement] = useState<EmailElement | null>(null)
  const [mjmlCode, setMjmlCode] = useState<string>("")
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const nextId = useRef(1)

const handleAddElement = (type: ElementType) => {
    const newElement: EmailElement = {
      id: `element-${nextId.current++}`,
      type,
      properties: {},
      children: [],
    }

// Set default properties based on element type
    switch (type) {
      case "text":
        newElement.content = "Your text here"
        newElement.properties = {
          color: "#000000",
          fontSize: "16px",
          padding: "10px",
          align: "left",
        }
        break
      case "image":
        newElement.properties = {
          src: "/placeholder.svg?height=200&width=400",
          width: "100%",
          align: "center",
          padding: "10px",
        }
        break
      case "button":
        newElement.content = "Click Me"
        newElement.properties = {
          backgroundColor: "#007bff",
          color: "#ffffff",
          padding: "10px 20px",
          align: "center",
          href: "#",
          borderRadius: "4px",
        }
        break
      case "divider":
        newElement.properties = {
          borderColor: "#e0e0e0",
          borderWidth: "1px",
          padding: "10px 0",
        }
        break
      case "spacer":
        newElement.properties = {
          height: "20px",
        }
        break
      case "column1":
      case "column2":
      case "column3":
        newElement.properties = {
          backgroundColor: "#ffffff",
          padding: "10px",
        }
        const columnCount = type === "column1" ? 1 : type === "column2" ? 2 : 3
        for (let i = 0; i < columnCount; i++) {
          newElement.children?.push({
            id: `element-${nextId.current++}`,
            type: "text",
            content: `Column ${i + 1} content`,
            properties: {
              padding: "10px",
            },
          })
        }
        break
    }

setElements([...elements, newElement])
  }

const handleUpdateElement = (updatedElement: EmailElement) => {
    setElements(elements.map((el) => (el.id === updatedElement.id ? updatedElement : el)))
    if (selectedElement?.id === updatedElement.id) {
      setSelectedElement(updatedElement)
    }
  }

const handleRemoveElement = (id: string) => {
    setElements(elements.filter((el) => el.id !== id))
    if (selectedElement?.id === id) {
      setSelectedElement(null)
    }
  }

const handleSelectElement = (element: EmailElement | null) => {
    setSelectedElement(element)
  }

const handleGenerateMJML = () => {
    try {
      console.log("Generating MJML for elements:", elements)
      const mjml = generateMJML(elements)
      setMjmlCode(mjml)
      setIsDialogOpen(true)
    } catch (error) {
      console.error("Error generating MJML:", error)
      alert("There was an error generating the MJML code. Please check the console for details.")
    }
  }

const handleCopyMJML = () => {
    navigator.clipboard.writeText(mjmlCode)
  }

return (
    <DndProvider backend={HTML5Backend}>
      <div className="flex flex-col lg:flex-row gap-4 h-[calc(100vh-120px)]">
        <ElementsSidebar onAddElement={handleAddElement} />

<div className="mt-4 flex justify-end">
            <Button onClick={handleGenerateMJML}>Generate MJML</Button>
          </div>
        </div>

{/* Update the Dialog component to include a preview tab */}
      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="max-w-4xl">
          <DialogHeader>
            <DialogTitle>Email Template</DialogTitle>
          </DialogHeader>
          <Tabs defaultValue="code">
            <TabsList>
              <TabsTrigger value="code">MJML Code</TabsTrigger>
              <TabsTrigger value="preview">Preview</TabsTrigger>
            </TabsList>
            <TabsContent value="code" className="relative">
              <Textarea className="h-96 font-mono text-sm p-4" readOnly value={mjmlCode} />
              <Button variant="outline" size="icon" className="absolute top-2 right-2" onClick={handleCopyMJML}>
                <Copy className="h-4 w-4" />
              </Button>
            </TabsContent>
            <TabsContent value="preview" className="h-96">
              <EmailPreview elements={elements} />
            </TabsContent>
          </Tabs>
        </DialogContent>
      </Dialog>
    </DndProvider>
  )
}</article></body></html>