65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { HelpCircle } from 'lucide-react';
|
|
|
|
interface WelcomeMessageEditorProps {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
placeholder?: string;
|
|
rows?: number;
|
|
}
|
|
|
|
export const WelcomeMessageEditor: React.FC<WelcomeMessageEditorProps> = ({
|
|
value,
|
|
onChange,
|
|
placeholder,
|
|
rows = 6
|
|
}) => {
|
|
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
|
onChange(e.target.value);
|
|
};
|
|
|
|
// Convert newlines to <br> tags for preview
|
|
const getPreviewHtml = () => {
|
|
return value
|
|
.split('\n')
|
|
.map(line => line.trim())
|
|
.filter(line => line.length > 0)
|
|
.join('<br />');
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<div className="relative">
|
|
<textarea
|
|
value={value}
|
|
onChange={handleChange}
|
|
placeholder={placeholder}
|
|
rows={rows}
|
|
className="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors resize-none font-mono text-sm"
|
|
/>
|
|
<div className="absolute top-2 right-2 text-neutral-400" title="Line breaks will be preserved in emails">
|
|
<HelpCircle className="w-4 h-4" aria-hidden="true" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-xs text-neutral-500">
|
|
Tip: Press Enter to create a new line. Each line will appear as a separate paragraph in emails.
|
|
</div>
|
|
|
|
{value && (
|
|
<div className="mt-4">
|
|
<p className="text-sm font-medium text-neutral-700 mb-2">Preview:</p>
|
|
<div className="p-4 bg-neutral-50 rounded-lg border border-neutral-200">
|
|
<div
|
|
className="text-sm text-neutral-700 whitespace-pre-wrap"
|
|
dangerouslySetInnerHTML={{ __html: getPreviewHtml() }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
WelcomeMessageEditor.displayName = 'WelcomeMessageEditor';
|