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

mail page ui correction maj compose 8

Browse Source
This commit is contained in:
alma 2025-04-16 12:24:56 +02:00
parent 9ef663c35e
commit eca8d1ee01
1 changed files with 38 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
app/mail/page.tsx
View File

@ -451,6 +451,7 @@ export default function MailPage() {
const [itemToDelete, setItemToDelete] = useState<number | null>(null);
const [showCc, setShowCc] = useState(false);
const [contentLoading, setContentLoading] = useState(false);
const [attachments, setAttachments] = useState<File[]>([]);
// Move getSelectedEmail inside the component
const getSelectedEmail = () => {
@ -692,6 +693,12 @@ export default function MailPage() {
}
};
const handleFileAttachment = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.files) {
setAttachments(Array.from(e.target.files));
}
};
if (error) {
return (
<div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
@ -1107,13 +1114,13 @@ export default function MailPage() {
<div className="p-6 space-y-4">
{/* To Field */}
<div>
<Label htmlFor="to" className="text-sm font-medium text-gray-700">To</Label>
<Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
<Input
id="to"
value={composeTo}
onChange={(e) => setComposeTo(e.target.value)}
placeholder="recipient@example.com"
className="w-full mt-1 bg-white border-gray-300"
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
/>
</div>
@ -1138,13 +1145,13 @@ export default function MailPage() {
{/* CC Field */}
{showCc && (
<div>
<Label htmlFor="cc" className="text-sm font-medium text-gray-700">Cc</Label>
<Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
<Input
id="cc"
value={composeCc}
onChange={(e) => setComposeCc(e.target.value)}
placeholder="cc@example.com"
className="w-full mt-1 bg-white border-gray-300"
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
/>
</div>
)}
@ -1152,38 +1159,38 @@ export default function MailPage() {
{/* BCC Field */}
{showBcc && (
<div>
<Label htmlFor="bcc" className="text-sm font-medium text-gray-700">Bcc</Label>
<Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
<Input
id="bcc"
value={composeBcc}
onChange={(e) => setComposeBcc(e.target.value)}
placeholder="bcc@example.com"
className="w-full mt-1 bg-white border-gray-300"
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
/>
</div>
)}
{/* Subject Field */}
<div>
<Label htmlFor="subject" className="text-sm font-medium text-gray-700">Subject</Label>
<Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
<Input
id="subject"
value={composeSubject}
onChange={(e) => setComposeSubject(e.target.value)}
placeholder="Enter subject"
className="w-full mt-1 bg-white border-gray-300"
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
/>
</div>
{/* Message Body */}
<div>
<Label htmlFor="message" className="text-sm font-medium text-gray-700">Message</Label>
<Label htmlFor="message" className="block text-sm font-medium text-gray-700">Message</Label>
<Textarea
id="message"
value={composeBody}
onChange={(e) => setComposeBody(e.target.value)}
placeholder="Write your message..."
className="w-full mt-1 min-h-[200px] bg-white border-gray-300 resize-none"
className="w-full mt-1 min-h-[200px] bg-white border-gray-300 text-gray-900 resize-none"
/>
</div>
</div>
@ -1192,13 +1199,27 @@ export default function MailPage() {
{/* Modal Footer - Fixed at bottom */}
<div className="flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white">
<div className="flex items-center gap-2">
<Button
variant="outline"
size="icon"
className="rounded-full hover:bg-gray-100 border-gray-300"
>
<Paperclip className="h-4 w-4 text-gray-600" />
</Button>
{/* File Input for Attachments */}
<input
type="file"
id="file-attachment"
className="hidden"
multiple
onChange={handleFileAttachment}
/>
<label htmlFor="file-attachment">
<Button
variant="outline"
size="icon"
className="rounded-full bg-white hover:bg-gray-100 border-gray-300"
onClick={(e) => {
e.preventDefault();
document.getElementById('file-attachment')?.click();
}}
>
<Paperclip className="h-4 w-4 text-gray-600" />
</Button>
</label>
</div>
<div className="flex items-center gap-3">
<Button