134 lines
4.4 KiB
TypeScript
134 lines
4.4 KiB
TypeScript
'use client';
|
|
|
|
import { Card } from "@/components/ui/card"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Mail, Search, Star, Inbox, Send, Archive, Trash } from "lucide-react"
|
|
import { useState, useEffect } from "react"
|
|
|
|
interface Email {
|
|
id: number
|
|
accountId: number
|
|
from: string
|
|
fromName: string
|
|
to: string
|
|
subject: string
|
|
body: string
|
|
date: string
|
|
read: boolean
|
|
starred: boolean
|
|
category: string
|
|
}
|
|
|
|
export default function MailPage() {
|
|
const [emails, setEmails] = useState<Email[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
async function fetchEmails() {
|
|
try {
|
|
const res = await fetch('/api/mail')
|
|
if (!res.ok) throw new Error('Failed to fetch emails')
|
|
const data = await res.json()
|
|
setEmails(data.messages)
|
|
} catch (error) {
|
|
console.error('Error fetching emails:', error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
fetchEmails()
|
|
}, [])
|
|
|
|
return (
|
|
<div className="flex h-screen bg-gray-100">
|
|
{/* Sidebar */}
|
|
<div className="w-64 bg-white shadow-sm border-r border-gray-200 p-4">
|
|
<Button className="w-full mb-4 gap-2">
|
|
<Mail className="h-4 w-4" />
|
|
Compose
|
|
</Button>
|
|
|
|
<nav className="space-y-1">
|
|
<Button variant="ghost" className="w-full justify-start gap-2">
|
|
<Inbox className="h-4 w-4" />
|
|
Inbox
|
|
</Button>
|
|
<Button variant="ghost" className="w-full justify-start gap-2">
|
|
<Star className="h-4 w-4" />
|
|
Starred
|
|
</Button>
|
|
<Button variant="ghost" className="w-full justify-start gap-2">
|
|
<Send className="h-4 w-4" />
|
|
Sent
|
|
</Button>
|
|
<Button variant="ghost" className="w-full justify-start gap-2">
|
|
<Archive className="h-4 w-4" />
|
|
Archive
|
|
</Button>
|
|
<Button variant="ghost" className="w-full justify-start gap-2">
|
|
<Trash className="h-4 w-4" />
|
|
Trash
|
|
</Button>
|
|
</nav>
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div className="flex-1 flex flex-col">
|
|
<header className="bg-white shadow-sm border-b border-gray-200 p-4">
|
|
<div className="flex items-center">
|
|
<div className="flex-1">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
|
|
<Input
|
|
type="search"
|
|
placeholder="Search mail..."
|
|
className="w-full pl-10"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="flex-1 overflow-auto p-4">
|
|
{loading ? (
|
|
<div className="flex items-center justify-center h-full">
|
|
<p className="text-gray-500">Loading emails...</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{emails.map((email) => (
|
|
<Card key={email.id} className={`p-4 hover:bg-gray-50 cursor-pointer ${!email.read ? 'bg-blue-50' : ''}`}>
|
|
<div className="flex items-center gap-4">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-4 w-4 p-0"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
// TODO: Implement star functionality
|
|
}}
|
|
>
|
|
<Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : 'text-gray-400'}`} />
|
|
</Button>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<p className="font-medium truncate">{email.fromName}</p>
|
|
<span className="text-sm text-gray-500">
|
|
{new Date(email.date).toLocaleDateString()}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm font-medium truncate">{email.subject}</p>
|
|
<p className="text-sm text-gray-500 truncate">{email.body}</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|