Business Letter

${(/* @__PURE__ */ new Date()).toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" })}

${cleanText}

` : `

${content.innerHTML}

`} `); printWindow.document.close(); printWindow.focus(); setTimeout(() => { printWindow.print(); printWindow.close(); }, 250); }; const handleClear = () => { setLetter(""); setError(null); }; const handleCopy = async () => { if (!letterContentRef.current) return; try { const cleanText = cleanTextContent( letterContentRef.current.innerHTML, printFormat === "simple" ); await navigator.clipboard.writeText(cleanText); setCopySuccess(true); setTimeout(() => setCopySuccess(false), 2e3); } catch (err) { console.error("Failed to copy text:", err); setError("Failed to copy to clipboard"); } }; const handleExport = () => { if (!letterContentRef.current) return; try { const cleanText = cleanTextContent(letterContentRef.current.innerHTML); const blob = new Blob([cleanText], { type: "text/plain" }); const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "business-letter.txt"; document.body.appendChild(a); a.click(); document.body.removeChild(a); window.URL.revokeObjectURL(url); } catch (err) { console.error("Failed to export text:", err); setError("Failed to export letter"); } }; return /* @__PURE__ */ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900 p-4 md:p-8" }, /* @__PURE__ */ React.createElement("div", { className: "w-[90%] max-w-[800px] mx-auto" }, /* @__PURE__ */ React.createElement("h1", { className: "text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-2" }, "Professional Letter Generator"), /* @__PURE__ */ React.createElement("p", { className: "text-blue-600 dark:text-blue-400 mb-8 font-medium" }, "App created by MAZ"), /* @__PURE__ */ React.createElement("div", { className: "mb-8" }, /* @__PURE__ */ React.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React.createElement("label", { className: "block text-lg font-medium text-gray-900 dark:text-gray-100 mb-4" }, "What would you like to write about?"), /* @__PURE__ */ React.createElement("div", { className: "bg-blue-50 dark:bg-blue-900/30 p-3 rounded-lg mb-3 text-sm text-blue-700 dark:text-blue-300" }, "\u{1F4A1} Quick tip: Just tell us who you're writing to and what's the issue. Missing details will be highlighted in yellow for you to fill in later, unless you provide them now."), /* @__PURE__ */ React.createElement( "textarea", { value: prompt, onChange: (e) => setPrompt(e.target.value), placeholder: "Example: Writing to City Council about uncollected waste bins at 123 High Street for 2 weeks", className: "w-full h-24 p-4 border border-gray-200 dark:border-gray-700 rounded-lg \n text-gray-900 dark:text-white bg-white dark:bg-gray-800\n focus:outline-none focus:ring-2 focus:ring-gray-500" } )), /* @__PURE__ */ React.createElement("div", { className: "mt-4 flex gap-4" }, /* @__PURE__ */ React.createElement( "button", { onClick: generateLetter, disabled: loading || !prompt.trim(), className: "px-6 py-2 bg-gray-900 dark:bg-gray-800 text-white rounded\n hover:bg-gray-700 dark:hover:bg-gray-700 disabled:opacity-50\n transition-colors duration-200" }, loading ? "Generating..." : "Generate Letter" )), error && /* @__PURE__ */ React.createElement("div", { className: "mt-4 text-red-600 dark:text-red-400" }, error)), loading && /* @__PURE__ */ React.createElement("div", { className: "animate-pulse space-y-4" }, /* @__PURE__ */ React.createElement("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4" }), /* @__PURE__ */ React.createElement("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded" }), /* @__PURE__ */ React.createElement("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-5/6" })), letter && !error && /* @__PURE__ */ React.createElement("div", { className: "print:mt-0" }, /* @__PURE__ */ React.createElement("div", { className: "bg-blue-50 dark:bg-blue-900/30 p-4 rounded-lg mb-4 text-sm text-blue-700 dark:text-blue-300" }, "\u{1F4A1} Tip: You can edit the letter directly in the box below before printing or copying. Yellow highlights show where you need to add missing information."), /* @__PURE__ */ React.createElement("div", { className: "mb-4 flex items-center gap-4" }, /* @__PURE__ */ React.createElement("label", { className: "inline-flex items-center" }, /* @__PURE__ */ React.createElement( "input", { type: "radio", name: "printFormat", value: "formal", checked: printFormat === "formal", onChange: () => setPrintFormat("formal"), className: "form-radio text-gray-900 dark:text-white" } ), /* @__PURE__ */ React.createElement("span", { className: "ml-2 text-gray-900 dark:text-white" }, "Formal Letter")), /* @__PURE__ */ React.createElement("label", { className: "inline-flex items-center" }, /* @__PURE__ */ React.createElement( "input", { type: "radio", name: "printFormat", value: "simple", checked: printFormat === "simple", onChange: () => setPrintFormat("simple"), className: "form-radio text-gray-900 dark:text-white" } ), /* @__PURE__ */ React.createElement("span", { className: "ml-2 text-gray-900 dark:text-white" }, "Simple Paragraph"))), /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap justify-center items-center gap-4 mb-4 w-full" }, /* @__PURE__ */ React.createElement( "button", { onClick: handlePrint, className: "flex-1 max-w-[200px] px-4 py-2 flex items-center justify-center gap-2 border border-gray-200 dark:border-gray-700\n text-gray-900 dark:text-white rounded hover:bg-gray-900\n hover:text-white dark:hover:bg-gray-700 transition-colors duration-200" }, /* @__PURE__ */ React.createElement("span", null, "\u{1F5A8}\uFE0F"), " Print Letter" ), /* @__PURE__ */ React.createElement( "button", { onClick: handleCopy, className: "flex-1 max-w-[200px] px-4 py-2 flex items-center justify-center gap-2 border border-gray-200 dark:border-gray-700\n text-gray-900 dark:text-white rounded hover:bg-gray-900\n hover:text-white dark:hover:bg-gray-700 transition-colors duration-200" }, /* @__PURE__ */ React.createElement("span", null, "\u{1F4CB}"), " ", copySuccess ? "Copied!" : "Copy" ), /* @__PURE__ */ React.createElement( "button", { onClick: handleExport, className: "flex-1 max-w-[200px] px-4 py-2 flex items-center justify-center gap-2 border border-gray-200 dark:border-gray-700\n text-gray-900 dark:text-white rounded hover:bg-gray-900\n hover:text-white dark:hover:bg-gray-700 transition-colors duration-200" }, /* @__PURE__ */ React.createElement("span", null, "\u2B07\uFE0F"), " Export as Text" ), /* @__PURE__ */ React.createElement( "button", { onClick: handleClear, className: "flex-1 max-w-[200px] px-4 py-2 flex items-center justify-center gap-2 border border-gray-200 dark:border-gray-700\n text-gray-900 dark:text-white rounded hover:bg-gray-900\n hover:text-white dark:hover:bg-gray-700 transition-colors duration-200 \n bg-red-50 hover:bg-red-600" }, /* @__PURE__ */ React.createElement("span", null, "\u{1F5D1}\uFE0F"), " Clear Letter" )), /* @__PURE__ */ React.createElement( "div", { ref: letterContentRef, contentEditable: true, className: "letter-content prose dark:prose-invert max-w-[21cm] mx-auto p-8 bg-white dark:bg-gray-800 \n rounded-lg border border-gray-200 dark:border-gray-700\n font-crimson-text text-gray-900 dark:text-white\n min-h-[29.7cm] shadow-lg overflow-y-auto", dangerouslySetInnerHTML: { __html: letter } } ))), /* @__PURE__ */ React.createElement("style", { jsx: true, global: true }, ` @media print { body * { visibility: hidden; } .prose, .prose * { visibility: visible; } .prose { position: absolute; left: 0; top: 0; width: 21cm; min-height: 29.7cm; padding: 2.54cm !important; border: none !important; box-shadow: none !important; } } .prose { font-size: 12pt; line-height: 1.5; } /* Make sure the app works well when embedded */ .min-h-screen { min-height: 100vh; min-height: 100dvh; } /* Ensure content is scrollable in embedded view */ .letter-content { max-height: calc(100vh - 300px); } /* Make sure buttons are clickable in embedded view */ button { cursor: pointer; position: relative; z-index: 1; } `)); } var page_default = MainComponent; return __toCommonJS(page_exports); })();