[V0_FILE]typescriptreact:file="page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" import { useState, useCallback } from "react" import Image from "next/image" import { Check, Edit2, Upload, Copy } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { toast } from "@/components/ui/use-toast" const templates = [ { id: 1, name: "Classic", layout: ["img", "title", "description"] }, { id: 2, name: "Modern", layout: ["title", "img", "description"] }, { id: 3, name: "Minimal", layout: ["title", "description"] }, { id: 4, name: "Split", layout: [["title", "img"], "description"] }, { id: 5, name: "Zigzag", layout: ["title", ["img", "description"]] }, { id: 6, name: "Banner", layout: ["img", ["title", "description"]] }, { id: 7, name: "Compact", layout: [["title", "description"], "img"] }, ] export default function MailGenerator() { const [selectedTemplate, setSelectedTemplate] = useState(templates[0]) const [title, setTitle] = useState("") const [description, setDescription] = useState("") const [image, setImage] = useState("/placeholder.svg") const handleImageUpload = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file) { const reader = new FileReader() reader.onload = (e) => setImage(e.target?.result as string) reader.readAsDataURL(file) } } const generateEmailHTML = useCallback(() => { const renderContent = (item: string | string[]) => { if (Array.isArray(item)) { return ` ${item .map( (subItem) => ``, ) .join("")}

${renderContent(subItem)}

` } switch (item) { case "img": return ` Email image

` case "title": return `

${title}

` case "description": return `

${description}

` default: return "" } } return ` ${title} ${selectedTemplate.layout.map(renderContent).join("\n ")} `.trim() }, [selectedTemplate, title, description, image]) const copyEmailHTML = () => { navigator.clipboard.writeText(generateEmailHTML()) toast({ title: "Copied!", description: "Email HTML has been copied to clipboard.", }) } const renderTemplatePreview = (layout: (string | string[])[]) => { return layout.map((item, index) => { if (Array.isArray(item)) { return (

{item.map((subItem, subIndex) => (

{renderTemplatePreview([subItem])}

))}

) } switch (item) { case "img": return

case "title": return

case "description": return (

) default: return null } }) } return (

Choose Template

{templates.map((template) => (

setSelectedTemplate(template)} >

{template.name}

{renderTemplatePreview(template.layout)}

))}

Email Preview

{selectedTemplate.layout.map((item, index) => { if (Array.isArray(item)) { return (

{item.map((subItem, subIndex) => (

{renderContentEditable(subItem)}

))}

) } return renderContentEditable(item, index) })}

) function renderContentEditable(item: string, key?: number) { switch (item) { case "img": return case "title": return case "description": return ( ) default: return null } } } interface EditableFieldProps { value: string onChange: (value: string) => void placeholder: string isTextarea?: boolean } function EditableField({ value, onChange, placeholder, isTextarea = false }: EditableFieldProps) { const [isEditing, setIsEditing] = useState(false) const handleSave = () => { setIsEditing(false) } return (

{isEditing ? (

{isTextarea ? (

onChange(e.target.value)}
              placeholder={placeholder}
              className="w-full"
            />
          ) : (
            <Input
              value={value}
              onChange={(e) => onChange(e.target.value)}
              placeholder={placeholder}
              className="w-full"
            />
          )}
          <Button onClick={handleSave} size="icon" variant="ghost" className="ml-2">
            <Check className="h-4 w-4" />
          </Button>
        </div>
      ) : (
        <div className="min-h-[2.5rem] p-2 rounded-md bg-gray-50 hover:bg-gray-100 transition-colors">
          {value ? (
            isTextarea ? (
              <p className="whitespace-pre-wrap">{value}</p>
            ) : (
              <h3 className="text-lg font-semibold">{value}</h3>
            )
          ) : (
            <span className="text-gray-400">{placeholder}</span>
          )}
        </div>
      )}
      {!isEditing && (
        <Button
          onClick={() => setIsEditing(true)}
          size="icon"
          variant="ghost"
          className="absolute right-2 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity"
        >
          <Edit2 className="h-4 w-4" />
        </Button>
      )}
    </div>
  )
}

interface ImageUploadProps {
  image: string
  onUpload: (e: React.ChangeEvent<HTMLInputElement>) => void
}

function ImageUpload({ image, onUpload }: ImageUploadProps) {
  return (
    <div className="relative group">
      <Image
        src={image || "/placeholder.svg"}
        alt="Template image"
        width={800}
        height={400}
        className="w-full h-[200px] object-cover rounded-md"
      />
      <label
        htmlFor="image-upload"
        className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer rounded-md"
      >
        <Upload className="h-8 w-8 text-white" />
      </label>
      <input id="image-upload" type="file" accept="image/*" onChange={onUpload} className="hidden" />
    </div>
  )
}
</article></body></html>