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

mail page custum 4

Browse Source
This commit is contained in:
alma 2025-04-15 19:00:23 +02:00
parent 0afe920f27
commit cca5478aad
1 changed files with 31 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
app/mail/page.tsx
View File

@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { Avatar, AvatarFallback } from "@/components/ui/avatar"; import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Mail, Inbox, Send, Star, Trash, Settings, Plus, Menu, Search, User, X } from 'lucide-react'; import { Mail, Inbox, Send, Star, Trash, Plus, ChevronLeft, ChevronRight, Search, ChevronDown } from 'lucide-react';
interface Account { interface Account {
id: number; id: number;
@ -141,31 +141,41 @@ export default function MailPage() {
${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}> ${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
{/* Logo and toggle */} {/* Logo and toggle */}
<div className="p-3 flex items-center justify-between border-b border-gray-100"> <div className="p-3 flex items-center justify-between border-b border-gray-100">
{sidebarOpen && ( {sidebarOpen && <h1 className="text-lg font-semibold text-gray-800">Mail</h1>}
<div className="flex items-center justify-between w-full">
<h1 className="text-lg font-semibold text-gray-800">Mail</h1>
<Button
variant="ghost"
size="sm"
className="text-gray-600"
>
<div className="flex items-center gap-2">
<div className="w-2.5 h-2.5 rounded-full bg-blue-500"></div>
<span className="text-sm">All accounts</span>
</div>
</Button>
</div>
)}
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="hidden md:flex text-gray-600" className="hidden md:flex text-gray-600"
onClick={() => setSidebarOpen(!sidebarOpen)} onClick={() => setSidebarOpen(!sidebarOpen)}
> >
{sidebarOpen ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />} {sidebarOpen ? <ChevronLeft className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
</Button> </Button>
</div> </div>
{/* Account Selection */}
<div className="p-3 border-b border-gray-100">
{sidebarOpen ? (
<Button
variant="ghost"
className="w-full justify-between text-gray-600 hover:text-gray-900"
>
<div className="flex items-center gap-2">
<div className="w-2.5 h-2.5 rounded-full bg-blue-500"></div>
<span>All accounts</span>
</div>
<ChevronDown className="h-4 w-4" />
</Button>
) : (
<Button
variant="ghost"
size="icon"
className="w-full aspect-square"
>
<div className="w-2.5 h-2.5 rounded-full bg-blue-500"></div>
</Button>
)}
</div>
{/* Compose button */} {/* Compose button */}
<Button <Button
className={`mx-3 mt-3 mb-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all ${sidebarOpen ? 'py-2 px-4' : 'p-2'}`} className={`mx-3 mt-3 mb-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all ${sidebarOpen ? 'py-2 px-4' : 'p-2'}`}
@ -243,9 +253,6 @@ export default function MailPage() {
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" /> <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
</div> </div>
</div> </div>
<Button variant="ghost" size="icon" className="ml-4 text-gray-600">
<User className="h-4 w-4" />
</Button>
</div> </div>
</header> </header>
@ -361,10 +368,11 @@ export default function MailPage() {
</div> </div>
</div> </div>
) : ( ) : (
<div className="hidden md:flex flex-1 items-center justify-center bg-gray-50 text-gray-500"> <div className="hidden md:flex flex-1 items-center justify-center bg-gray-50">
<div className="text-center"> <div className="text-center">
<Mail className="h-16 w-16 mx-auto mb-4 opacity-30" /> <Mail className="h-16 w-16 mx-auto mb-4 text-gray-300" />
<p>Select an email to read</p> <p className="text-gray-500">No email selected</p>
<p className="text-sm text-gray-400">Choose an email from the list to read its contents</p>
</div> </div>
</div> </div>
)} )}