mail page ui correction maj compose 14
This commit is contained in:
parent
2ab16c6a84
commit
0d869b4da4
@ -909,7 +909,6 @@ export default function MailPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
|
||||
{/* Sidebar */}
|
||||
<div className={`${sidebarOpen ? 'w-72' : 'w-20'} bg-white/95 backdrop-blur-sm border-0 shadow-lg flex flex-col transition-all duration-300 ease-in-out
|
||||
@ -923,156 +922,155 @@ export default function MailPage() {
|
||||
</div>
|
||||
|
||||
{/* Compose button */}
|
||||
<div className="p-2 border-b border-gray-100">
|
||||
<div className="p-2 border-b border-gray-100">
|
||||
<Button
|
||||
className="w-full bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-1.5 text-sm"
|
||||
onClick={() => {
|
||||
console.log('Compose button clicked');
|
||||
setShowCompose(true);
|
||||
// Reset form fields
|
||||
setComposeTo('');
|
||||
setComposeCc('');
|
||||
setComposeBcc('');
|
||||
setComposeSubject('');
|
||||
setComposeBody('');
|
||||
setShowCc(false);
|
||||
setShowBcc(false);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<PlusIcon className="h-3.5 w-3.5" />
|
||||
<span>Compose</span>
|
||||
className="w-full bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-1.5 text-sm"
|
||||
onClick={() => {
|
||||
setShowCompose(true);
|
||||
setComposeTo('');
|
||||
setComposeCc('');
|
||||
setComposeBcc('');
|
||||
setComposeSubject('');
|
||||
setComposeBody('');
|
||||
setShowCc(false);
|
||||
setShowBcc(false);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<PlusIcon className="h-3.5 w-3.5" />
|
||||
<span>Compose</span>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Accounts Section */}
|
||||
<div className="p-3 border-b border-gray-100">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-between mb-2 text-sm font-medium text-gray-500"
|
||||
onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
|
||||
>
|
||||
<span>Accounts</span>
|
||||
{accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||
</Button>
|
||||
|
||||
{accountsDropdownOpen && (
|
||||
<div className="space-y-1 pl-2">
|
||||
{accounts.map(account => (
|
||||
<Button
|
||||
key={account.id}
|
||||
variant="ghost"
|
||||
className="w-full justify-start px-2 py-1.5 text-sm"
|
||||
onClick={() => setSelectedAccount(account)}
|
||||
>
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
|
||||
<span className="font-medium">{account.name}</span>
|
||||
{account.id !== 0 && (
|
||||
<span className="text-xs text-gray-500 truncate">{account.email}</span>
|
||||
{/* Accounts Section */}
|
||||
<div className="p-3 border-b border-gray-100">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-between mb-2 text-sm font-medium text-gray-500"
|
||||
onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
|
||||
>
|
||||
<span>Accounts</span>
|
||||
{accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||
</Button>
|
||||
|
||||
{accountsDropdownOpen && (
|
||||
<div className="space-y-1 pl-2">
|
||||
{accounts.map(account => (
|
||||
<Button
|
||||
key={account.id}
|
||||
variant="ghost"
|
||||
className="w-full justify-start px-2 py-1.5 text-sm"
|
||||
onClick={() => setSelectedAccount(account)}
|
||||
>
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
|
||||
<span className="font-medium">{account.name}</span>
|
||||
{account.id !== 0 && (
|
||||
<span className="text-xs text-gray-500 truncate">{account.email}</span>
|
||||
)}
|
||||
</div>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 overflow-y-auto p-3">
|
||||
<ul className="space-y-1">
|
||||
{/* Standard folders */}
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'inbox' ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start"
|
||||
onClick={() => {setCurrentView('inbox'); setSelectedEmail(null);}}
|
||||
>
|
||||
<Inbox className="h-4 w-4 mr-2" />
|
||||
<span>Inbox</span>
|
||||
{emails.filter(e => !e.read && e.category === 'inbox').length > 0 && (
|
||||
<span className="ml-auto bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">
|
||||
{emails.filter(e => !e.read && e.category === 'inbox').length}
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'starred' ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start"
|
||||
onClick={() => {setCurrentView('starred'); setSelectedEmail(null);}}
|
||||
>
|
||||
<Star className="h-4 w-4 mr-2" />
|
||||
<span>Starred</span>
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'sent' ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start"
|
||||
onClick={() => {setCurrentView('sent'); setSelectedEmail(null);}}
|
||||
>
|
||||
<Send className="h-4 w-4 mr-2" />
|
||||
<span>Sent</span>
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'trash' ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start"
|
||||
onClick={() => {setCurrentView('trash'); setSelectedEmail(null);}}
|
||||
>
|
||||
<Trash className="h-4 w-4 mr-2" />
|
||||
<span>Trash</span>
|
||||
</Button>
|
||||
</li>
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 overflow-y-auto p-3">
|
||||
<ul className="space-y-1">
|
||||
{/* Standard folders */}
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'inbox' ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start"
|
||||
onClick={() => {setCurrentView('inbox'); setSelectedEmail(null);}}
|
||||
>
|
||||
<Inbox className="h-4 w-4 mr-2" />
|
||||
<span>Inbox</span>
|
||||
{emails.filter(e => !e.read && e.category === 'inbox').length > 0 && (
|
||||
<span className="ml-auto bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">
|
||||
{emails.filter(e => !e.read && e.category === 'inbox').length}
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'starred' ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start"
|
||||
onClick={() => {setCurrentView('starred'); setSelectedEmail(null);}}
|
||||
>
|
||||
<Star className="h-4 w-4 mr-2" />
|
||||
<span>Starred</span>
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'sent' ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start"
|
||||
onClick={() => {setCurrentView('sent'); setSelectedEmail(null);}}
|
||||
>
|
||||
<Send className="h-4 w-4 mr-2" />
|
||||
<span>Sent</span>
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'trash' ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start"
|
||||
onClick={() => {setCurrentView('trash'); setSelectedEmail(null);}}
|
||||
>
|
||||
<Trash className="h-4 w-4 mr-2" />
|
||||
<span>Trash</span>
|
||||
</Button>
|
||||
</li>
|
||||
|
||||
{/* Account-specific folders */}
|
||||
{selectedAccount && selectedAccount.id !== 0 && (
|
||||
<>
|
||||
{/* Account-specific folders */}
|
||||
{selectedAccount && selectedAccount.id !== 0 && folders.length > 0 && (
|
||||
<>
|
||||
<li className="mt-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-between"
|
||||
onClick={() => setFoldersDropdownOpen(!foldersDropdownOpen)}
|
||||
className="w-full justify-between"
|
||||
onClick={() => setFoldersDropdownOpen(!foldersDropdownOpen)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<Folder className="h-4 w-4 mr-2" />
|
||||
<span>Folders</span>
|
||||
<span>Folders</span>
|
||||
</div>
|
||||
{foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||
{foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||
</Button>
|
||||
</li>
|
||||
{foldersDropdownOpen && folders.map((folder, index) => (
|
||||
<li key={index}>
|
||||
<Button
|
||||
variant={currentView === folder ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start pl-8"
|
||||
onClick={() => {setCurrentView(folder); setSelectedEmail(null);}}
|
||||
>
|
||||
<span>{folder}</span>
|
||||
</Button>
|
||||
</li>
|
||||
{foldersDropdownOpen && folders.map((folder, index) => (
|
||||
<li key={index}>
|
||||
<Button
|
||||
variant={currentView === folder ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start pl-8"
|
||||
onClick={() => {setCurrentView(folder); setSelectedEmail(null);}}
|
||||
>
|
||||
<span>{folder}</span>
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
</nav>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Main content area */}
|
||||
{/* Main content */}
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
{/* Email list */}
|
||||
<div className="w-[380px] bg-white/95 backdrop-blur-sm border-r border-gray-100 overflow-y-auto">
|
||||
{/* Email list header */}
|
||||
<div className="p-4 border-b border-gray-100 flex justify-between items-center">
|
||||
<div className="flex items-center gap-4">
|
||||
{emails.length > 0 && (
|
||||
<Checkbox
|
||||
checked={selectedEmails.length === emails.length}
|
||||
onCheckedChange={toggleSelectAll}
|
||||
{filteredEmails.length > 0 && (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedEmails.length === filteredEmails.length}
|
||||
onChange={toggleSelectAll}
|
||||
className="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
|
||||
/>
|
||||
)}
|
||||
<h2 className="text-lg font-semibold text-gray-800 capitalize">
|
||||
@ -1080,81 +1078,57 @@ export default function MailPage() {
|
||||
</h2>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{emails.length} emails
|
||||
{filteredEmails.length} emails
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bulk Actions Bar */}
|
||||
{showBulkActions && selectedEmails.length > 0 && (
|
||||
<div className="p-2 bg-gray-50 border-b border-gray-100 flex items-center justify-between">
|
||||
<span className="text-sm text-gray-600">{selectedEmails.length} selected</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-red-600 hover:text-red-700"
|
||||
onClick={handleBulkDelete}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Email List */}
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
|
||||
</div>
|
||||
) : (
|
||||
<ul className="divide-y divide-gray-100">
|
||||
{emails.map((email) => (
|
||||
<li
|
||||
key={email.id}
|
||||
className={`flex items-center p-4 hover:bg-gray-50 cursor-pointer ${
|
||||
selectedEmail?.id === email.id ? 'bg-blue-50' : ''
|
||||
} ${!email.read ? 'bg-blue-50/20' : ''}`}
|
||||
onClick={() => handleEmailSelect(email.id)}
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Checkbox
|
||||
checked={selectedEmails.includes(email.id.toString())}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onCheckedChange={(checked) => {
|
||||
if (checked) {
|
||||
setSelectedEmails([...selectedEmails, email.id.toString()]);
|
||||
} else {
|
||||
setSelectedEmails(selectedEmails.filter(id => id !== email.id.toString()));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<p className={`text-sm ${!email.read ? 'font-semibold' : ''}`}>
|
||||
{email.fromName || email.from}
|
||||
</p>
|
||||
<p className="text-sm text-gray-600 truncate">{email.subject}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-xs text-gray-500">{formatDate(email.date)}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-gray-400 hover:text-yellow-400"
|
||||
onClick={(e) => toggleStarred(email.id, e)}
|
||||
>
|
||||
<Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="divide-y divide-gray-200">
|
||||
{filteredEmails.map((email) => (
|
||||
<div
|
||||
key={email.id}
|
||||
className={`flex items-center p-4 hover:bg-gray-50 cursor-pointer ${
|
||||
selectedEmail?.id === email.id ? 'bg-blue-50' : ''
|
||||
} ${!email.read ? 'bg-blue-50/20' : ''}`}
|
||||
onClick={() => handleEmailSelect(email.id)}
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Checkbox
|
||||
checked={selectedEmails.includes(email.id.toString())}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onCheckedChange={(checked) => {
|
||||
if (checked) {
|
||||
setSelectedEmails([...selectedEmails, email.id.toString()]);
|
||||
} else {
|
||||
setSelectedEmails(selectedEmails.filter(id => id !== email.id.toString()));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<p className={`text-sm ${!email.read ? 'font-semibold' : ''}`}>
|
||||
{email.fromName || email.from}
|
||||
</p>
|
||||
<p className="text-sm text-gray-600 truncate">{email.subject}</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-xs text-gray-500">{formatDate(email.date)}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-gray-400 hover:text-yellow-400"
|
||||
onClick={(e) => toggleStarred(email.id, e)}
|
||||
>
|
||||
<Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Email preview panel */}
|
||||
@ -1263,180 +1237,5 @@ export default function MailPage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Compose Email Modal - Updated Design */}
|
||||
{showCompose && (
|
||||
<div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
|
||||
<div className="w-full max-w-2xl h-[80vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
|
||||
{/* Modal Header */}
|
||||
<div className="flex items-center justify-between px-6 py-3 border-b border-gray-200">
|
||||
<h3 className="text-lg font-semibold text-gray-900">New Message</h3>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="hover:bg-gray-100 rounded-full"
|
||||
onClick={() => {
|
||||
setShowCompose(false);
|
||||
setComposeTo('');
|
||||
setComposeCc('');
|
||||
setComposeBcc('');
|
||||
setComposeSubject('');
|
||||
setComposeBody('');
|
||||
setShowCc(false);
|
||||
setShowBcc(false);
|
||||
}}
|
||||
>
|
||||
<X className="h-5 w-5 text-gray-500" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Modal Body - Make it scrollable */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="p-6 space-y-4">
|
||||
{/* To Field */}
|
||||
<div>
|
||||
<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 text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* CC/BCC Toggle Buttons */}
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
||||
onClick={() => setShowCc(!showCc)}
|
||||
>
|
||||
{showCc ? 'Hide Cc' : 'Add Cc'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
||||
onClick={() => setShowBcc(!showBcc)}
|
||||
>
|
||||
{showBcc ? 'Hide Bcc' : 'Add Bcc'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* CC Field */}
|
||||
{showCc && (
|
||||
<div>
|
||||
<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 text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* BCC Field */}
|
||||
{showBcc && (
|
||||
<div>
|
||||
<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 text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Subject Field */}
|
||||
<div>
|
||||
<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 text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Message Body */}
|
||||
<div>
|
||||
<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 text-gray-900 resize-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
{/* 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
|
||||
variant="ghost"
|
||||
className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
|
||||
onClick={() => setShowCompose(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
className="bg-blue-600 text-white hover:bg-blue-700"
|
||||
onClick={handleSend}
|
||||
>
|
||||
Send
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Delete Confirmation Dialog */}
|
||||
<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This action cannot be undone. This will permanently delete the selected {deleteType}.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleDeleteConfirm}>Delete</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user