mail page custum 10

app/mail/page.tsx

@@ -18,6 +18,8 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { MoreVertical, Settings, Plus as PlusIcon, Trash2, Edit, Mail, Inbox, Send, Star, Trash, Plus, ChevronLeft, ChevronRight, Search, ChevronDown, Folder, ChevronUp, Reply, Forward, ReplyAll, MoreHorizontal, FolderOpen, X } from 'lucide-react';
+import { Label } from "@/components/ui/label";
+import { Paperclip, Copy, EyeOff } from 'lucide-react';
 
 interface Account {
   id: number;
@@ -106,6 +108,8 @@ export default function MailPage() {
   const [deleteType, setDeleteType] = useState<'email' | 'emails' | 'account'>('email');
   const [itemToDelete, setItemToDelete] = useState<number | null>(null);
   const [showBulkActions, setShowBulkActions] = useState(false);
+  const [showCc, setShowCc] = useState(false);
+  const [showBcc, setShowBcc] = useState(false);
 
   // Mock folders data
   const folders = [
@@ -664,23 +668,24 @@ export default function MailPage() {
 
       {/* Compose email modal */}
       {composeOpen && (
-        <div className="fixed inset-0 bg-black bg-opacity-25 flex items-center justify-center p-4 z-50">
+        <div className="fixed inset-0 bg-black/25 backdrop-blur-sm flex items-center justify-center p-4 z-50">
-          <Card className="w-full max-w-2xl">
+          <Card className="w-full max-w-2xl bg-white">
-            <CardHeader className="flex flex-row items-center justify-between">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
-              <CardTitle>New Message</CardTitle>
+              <CardTitle className="text-xl">New Message</CardTitle>
               <Button 
                 variant="ghost"
                 size="icon"
+                className="text-gray-500 hover:text-gray-700"
                 onClick={() => setComposeOpen(false)}
               >
                 <X className="h-4 w-4" />
               </Button>
             </CardHeader>
-            <CardContent>
+            <CardContent className="space-y-4">
-              <div className="space-y-4">
+              <div className="space-y-4 border-b border-gray-100 pb-4">
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">From</label>
+                  <Label className="text-sm text-gray-700">From</Label>
-                  <select className="w-full border border-gray-300 rounded-lg px-3 py-2">
+                  <select className="w-full mt-1 bg-white border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                     {accounts.map(account => (
                       <option key={account.id} value={account.id}>
                         {account.name} ({account.email})
@@ -689,29 +694,131 @@ export default function MailPage() {
                   </select>
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">To</label>
+                  <div className="flex items-center justify-between">
-                  <Input type="email" placeholder="email@example.com" />
+                    <Label className="text-sm text-gray-700">To</Label>
+                    <div className="flex items-center gap-2">
+                      {!showCc && (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="text-xs text-gray-500 hover:text-gray-700"
+                          onClick={() => setShowCc(true)}
+                        >
+                          Add Cc
+                        </Button>
+                      )}
+                      {!showBcc && (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="text-xs text-gray-500 hover:text-gray-700"
+                          onClick={() => setShowBcc(true)}
+                        >
+                          Add Bcc
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                  <Input 
+                    type="email" 
+                    placeholder="email@example.com" 
+                    className="mt-1 bg-white border-gray-200"
+                  />
                 </div>
+                {showCc && (
+                  <div>
+                    <div className="flex items-center justify-between">
+                      <Label className="text-sm text-gray-700">Cc</Label>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="text-xs text-gray-500 hover:text-gray-700"
+                        onClick={() => setShowCc(false)}
+                      >
+                        Remove
+                      </Button>
+                    </div>
+                    <Input 
+                      type="email" 
+                      placeholder="cc@example.com" 
+                      className="mt-1 bg-white border-gray-200"
+                    />
+                  </div>
+                )}
+                {showBcc && (
+                  <div>
+                    <div className="flex items-center justify-between">
+                      <Label className="text-sm text-gray-700">Bcc</Label>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="text-xs text-gray-500 hover:text-gray-700"
+                        onClick={() => setShowBcc(false)}
+                      >
+                        Remove
+                      </Button>
+                    </div>
+                    <Input 
+                      type="email" 
+                      placeholder="bcc@example.com" 
+                      className="mt-1 bg-white border-gray-200"
+                    />
+                  </div>
+                )}
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">Subject</label>
+                  <Label className="text-sm text-gray-700">Subject</Label>
-                  <Input type="text" placeholder="Subject" />
+                  <Input 
-                </div>
+                    type="text" 
-                <div>
+                    placeholder="Subject" 
-                  <label className="block text-sm font-medium text-gray-700 mb-1">Message</label>
+                    className="mt-1 bg-white border-gray-200"
-                  <Textarea 
-                    className="h-48"
-                    placeholder="Write your message here..."
                   />
                 </div>
               </div>
-              <div className="mt-6 flex justify-end space-x-3">
+
+              <div>
+                <Label className="text-sm text-gray-700">Message</Label>
+                <Textarea 
+                  className="mt-1 h-48 bg-white border-gray-200 resize-none"
+                  placeholder="Write your message here..."
+                />
+              </div>
+
+              {/* File Attachment Section */}
+              <div className="border-t border-gray-100 pt-4">
+                <div className="flex items-center gap-4">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="text-gray-600 border-gray-200 hover:text-gray-900 hover:bg-gray-50"
+                    onClick={() => document.getElementById('file-upload')?.click()}
+                  >
+                    <Paperclip className="h-4 w-4 mr-2" />
+                    Attach files
+                  </Button>
+                  <span className="text-xs text-gray-500">Maximum file size: 25 MB</span>
+                </div>
+                <input
+                  type="file"
+                  id="file-upload"
+                  multiple
+                  className="hidden"
+                  onChange={(e) => {
+                    // Handle file upload
+                    console.log(e.target.files);
+                  }}
+                />
+              </div>
+
+              <div className="flex justify-end gap-3 pt-4 border-t border-gray-100">
                 <Button 
                   variant="outline"
+                  className="text-gray-700 border-gray-200 hover:bg-gray-50 hover:text-gray-900"
                   onClick={() => setComposeOpen(false)}
                 >
                   Cancel
                 </Button>
                 <Button 
+                  className="bg-blue-600 text-white hover:bg-blue-700"
                   onClick={() => setComposeOpen(false)}
                 >
                   Send