import { Document, Head, Page, Spacer } from "@htmldocs/react"; import { FaPhone, FaEnvelope, FaGlobe } from "react-icons/fa"; import "~/index.css"; interface Company { name: string; logo: string; address: string; city: string; phone: string; email: string; website: string; } interface Contact { name: string; title: string; company: string; address: string; city: string; } export interface LetterProps { sender: Company; senderContact: { name: string; title: string; }; recipient: Contact; date: string; reference?: string; subject: string; content: string; closing: string; } function Letter({ sender, senderContact, recipient, date, reference, subject, content, closing, }: LetterProps) { // Process content to handle paragraphs and bullet points const processContent = (content: string) => { const paragraphs = content.split('\n\n').filter(p => p.trim()); return paragraphs.map((paragraph, index) => { // Check if paragraph contains bullet points if (paragraph.includes('•')) { const [introText, ...listItems] = paragraph.split('\n'); return (

{introText &&

{introText.trim()}

}

• {item.replace('•', '').trim()}

); } return (

{paragraph}

); }); }; return ( {/* Header with Logo and Company Info */}

{sender.address}

{sender.city}

{sender.phone}

{sender.email}

{sender.website}

{/* Date and Reference */}

{date}

{/* Recipient's Information */}

{recipient.name}

{recipient.title}

{recipient.company}

{recipient.address}

{recipient.city}

{/* Subject Line */}

Subject: {subject}

{/* Salutation */}

Dear {recipient.name},

{/* Content with proper paragraph and list spacing */}

{processContent(content)}

{/* Closing */}

{closing},

{senderContact.name}

{senderContact.title}

{sender.name}

); } Letter.PreviewProps = { sender: { name: "TechFlow Solutions, Inc.", logo: "https://placehold.co/200x80?text=TechFlow", address: "100 Enterprise Way, Suite 300", city: "San Francisco, CA 94105", phone: "(415) 555-0123", email: "info@techflow.com", website: "www.techflow.com" }, senderContact: { name: "Michael Chen", title: "Director of Enterprise Partnerships" }, recipient: { name: "Sarah Williams", title: "Chief Technology Officer", company: "GlobalCorp Enterprises", address: "200 Innovation Drive", city: "Boston, MA 02110" }, date: "April 4, 2024", subject: "Enterprise Software Solution Proposal - Cloud Migration Services", content: `Following our productive meeting last week, I am pleased to present TechFlow Solutions' formal proposal for GlobalCorp's cloud migration initiative. Based on our discussion of your requirements, we have developed a comprehensive solution that addresses your key concerns regarding data security, minimal operational disruption, and scalability. Our proposal includes: full assessment of current infrastructure, customized migration strategy, 24/7 support during the transition period, and post-migration optimization services. The detailed proposal document and pricing structure are attached for your review. We are confident that our solution will reduce your operational costs by approximately 35% while improving system performance by up to 60%. We would welcome the opportunity to discuss this proposal in detail at your convenience. I will follow up with your office next week to schedule a meeting with your team. Thank you for considering TechFlow Solutions as your technology partner. We look forward to the possibility of contributing to GlobalCorp's digital transformation journey.`, closing: "Best regards" }; Letter.documentId = "letter"; export default Letter;