mail page custum 10
This commit is contained in:
parent
e3d624b6cc
commit
5a5a525b5d
@ -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">
|
||||
<Card className="w-full max-w-2xl">
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle>New Message</CardTitle>
|
||||
<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 bg-white">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
|
||||
<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>
|
||||
<div className="space-y-4">
|
||||
<CardContent 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>
|
||||
<select className="w-full border border-gray-300 rounded-lg px-3 py-2">
|
||||
<Label className="text-sm text-gray-700">From</Label>
|
||||
<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>
|
||||
<Input type="email" placeholder="email@example.com" />
|
||||
<div className="flex items-center justify-between">
|
||||
<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>
|
||||
<Input type="text" placeholder="Subject" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Message</label>
|
||||
<Textarea
|
||||
className="h-48"
|
||||
placeholder="Write your message here..."
|
||||
<Label className="text-sm text-gray-700">Subject</Label>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Subject"
|
||||
className="mt-1 bg-white border-gray-200"
|
||||
/>
|
||||
</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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user