alma/Neah
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

courrier preview

Browse Source
This commit is contained in:
alma 2025-04-30 23:32:16 +02:00
parent 022d37f1be
commit d6e3acd17a
1 changed files with 34 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
components/email/ComposeEmail.tsx
View File

@ -195,53 +195,53 @@ export default function ComposeEmail(props: ComposeEmailProps) {
}; };
return ( return (
<div className="flex flex-col h-full max-h-[80vh]"> <div className="flex flex-col h-full max-h-[80vh] bg-white border rounded-md shadow-md">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between p-4 border-b"> <div className="flex items-center justify-between p-4 border-b bg-gray-50">
<h2 className="text-lg font-medium">{getComposeTitle()}</h2> <h2 className="text-lg font-medium text-gray-800">{getComposeTitle()}</h2>
<Button variant="ghost" size="icon" onClick={onClose}> <Button variant="ghost" size="icon" onClick={onClose}>
<X className="h-5 w-5" /> <X className="h-5 w-5" />
</Button> </Button>
</div> </div>
{/* Email Form */} {/* Email Form */}
<div className="flex-1 overflow-y-auto"> <div className="flex-1 overflow-y-auto bg-white">
<div className="p-4 space-y-4"> <div className="p-4 space-y-4">
{/* Recipients */} {/* Recipients */}
<div className="border-b pb-2"> <div className="border-b pb-2">
<div className="flex items-center mb-2"> <div className="flex items-center mb-2">
<span className="w-16 text-gray-500">To:</span> <span className="w-16 text-gray-700 font-medium">To:</span>
<Input <Input
type="text" type="text"
value={to} value={to}
onChange={(e) => setTo(e.target.value)} onChange={(e) => setTo(e.target.value)}
placeholder="recipient@example.com" placeholder="recipient@example.com"
className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0" className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0 bg-white text-gray-800"
/> />
</div> </div>
{showCc && ( {showCc && (
<div className="flex items-center mb-2"> <div className="flex items-center mb-2">
<span className="w-16 text-gray-500">Cc:</span> <span className="w-16 text-gray-700 font-medium">Cc:</span>
<Input <Input
type="text" type="text"
value={cc} value={cc}
onChange={(e) => setCc(e.target.value)} onChange={(e) => setCc(e.target.value)}
placeholder="cc@example.com" placeholder="cc@example.com"
className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0" className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0 bg-white text-gray-800"
/> />
</div> </div>
)} )}
{showBcc && ( {showBcc && (
<div className="flex items-center mb-2"> <div className="flex items-center mb-2">
<span className="w-16 text-gray-500">Bcc:</span> <span className="w-16 text-gray-700 font-medium">Bcc:</span>
<Input <Input
type="text" type="text"
value={bcc} value={bcc}
onChange={(e) => setBcc(e.target.value)} onChange={(e) => setBcc(e.target.value)}
placeholder="bcc@example.com" placeholder="bcc@example.com"
className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0" className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0 bg-white text-gray-800"
/> />
</div> </div>
)} )}
@ -250,7 +250,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
<div className="flex gap-3 ml-16 mb-1"> <div className="flex gap-3 ml-16 mb-1">
{!showCc && ( {!showCc && (
<button <button
className="text-blue-600 text-sm" className="text-blue-600 text-sm hover:underline"
onClick={() => setShowCc(true)} onClick={() => setShowCc(true)}
> >
Add Cc Add Cc
@ -259,7 +259,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
{!showBcc && ( {!showBcc && (
<button <button
className="text-blue-600 text-sm" className="text-blue-600 text-sm hover:underline"
onClick={() => setShowBcc(true)} onClick={() => setShowBcc(true)}
> >
Add Bcc Add Bcc
@ -271,13 +271,13 @@ export default function ComposeEmail(props: ComposeEmailProps) {
{/* Subject */} {/* Subject */}
<div className="border-b pb-2"> <div className="border-b pb-2">
<div className="flex items-center"> <div className="flex items-center">
<span className="w-16 text-gray-500">Subject:</span> <span className="w-16 text-gray-700 font-medium">Subject:</span>
<Input <Input
type="text" type="text"
value={subject} value={subject}
onChange={(e) => setSubject(e.target.value)} onChange={(e) => setSubject(e.target.value)}
placeholder="Subject" placeholder="Subject"
className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0" className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0 bg-white text-gray-800"
/> />
</div> </div>
</div> </div>
@ -285,7 +285,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
{/* Message Body */} {/* Message Body */}
<div <div
ref={editorRef} ref={editorRef}
className="min-h-[300px] outline-none p-2" className="min-h-[300px] outline-none p-2 border rounded-md bg-white text-gray-800"
contentEditable={true} contentEditable={true}
dangerouslySetInnerHTML={{ __html: emailContent }} dangerouslySetInnerHTML={{ __html: emailContent }}
onInput={(e) => setEmailContent(e.currentTarget.innerHTML)} onInput={(e) => setEmailContent(e.currentTarget.innerHTML)}
@ -293,10 +293,11 @@ export default function ComposeEmail(props: ComposeEmailProps) {
{/* Attachments */} {/* Attachments */}
{attachments.length > 0 && ( {attachments.length > 0 && (
<div className="p-2 border rounded-md"> <div className="p-2 border rounded-md bg-gray-50">
<div className="text-sm font-medium mb-1 text-gray-700">Attachments:</div>
{attachments.map((file, index) => ( {attachments.map((file, index) => (
<div key={index} className="flex items-center justify-between text-sm py-1"> <div key={index} className="flex items-center justify-between text-sm py-1">
<span className="truncate mr-2">{file.name}</span> <span className="truncate mr-2 text-gray-800">{file.name}</span>
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
@ -313,7 +314,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
</div> </div>
{/* Footer */} {/* Footer */}
<div className="border-t p-3 flex items-center justify-between"> <div className="border-t p-3 flex items-center justify-between bg-gray-50">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{/* File Input for Attachments */} {/* File Input for Attachments */}
<input <input
@ -327,13 +328,14 @@ export default function ComposeEmail(props: ComposeEmailProps) {
} }
}} }}
/> />
<label htmlFor="file-attachment"> <label htmlFor="file-attachment" className="flex items-center cursor-pointer">
<Button <Button
variant="ghost" variant="outline"
size="icon" size="sm"
className="h-8 w-8" className="flex items-center gap-1"
> >
<Paperclip className="h-4 w-4" /> <Paperclip className="h-4 w-4" />
<span>Attach</span>
</Button> </Button>
</label> </label>
</div> </div>
@ -342,6 +344,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
<Button <Button
variant="outline" variant="outline"
onClick={onClose} onClick={onClose}
className="border-gray-300 text-gray-700"
> >
Cancel Cancel
</Button> </Button>
@ -350,14 +353,19 @@ export default function ComposeEmail(props: ComposeEmailProps) {
variant="default" variant="default"
onClick={handleSend} onClick={handleSend}
disabled={sending} disabled={sending}
className="bg-blue-600 hover:bg-blue-700" className="bg-blue-600 hover:bg-blue-700 text-white"
> >
{sending ? ( {sending ? (
<> <>
<Loader2 className="mr-2 h-4 w-4 animate-spin" /> <Loader2 className="mr-2 h-4 w-4 animate-spin" />
Sending Sending
</> </>
) : 'Send'} ) : (
<>
<SendHorizontal className="h-4 w-4" />
Send
</>
)}
</Button> </Button>
</div> </div>
</div> </div>
@ -372,6 +380,8 @@ export default function ComposeEmail(props: ComposeEmailProps) {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
font-size: 14px; font-size: 14px;
line-height: 1.5; line-height: 1.5;
color: #333;
background-color: #fff;
} }
[contenteditable]:focus { [contenteditable]:focus {