zetaloop
120 lines
4.4 KiB
TypeScript
120 lines
4.4 KiB
TypeScript
import { Bell, CheckCheck, MessageSquare, ShoppingBag } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import { mockNotifications } from "@/lib/mock-data"
|
|
import type { Notification } from "@/lib/types"
|
|
|
|
const typeIcons: Record<Notification["type"], typeof Bell> = {
|
|
order: ShoppingBag,
|
|
community: MessageSquare,
|
|
system: Bell,
|
|
}
|
|
|
|
const typeLabels: Record<Notification["type"], string> = {
|
|
order: "订单",
|
|
community: "社区",
|
|
system: "系统",
|
|
}
|
|
|
|
function NotificationItem({ notification }: { notification: Notification }) {
|
|
const Icon = typeIcons[notification.type]
|
|
const content = (
|
|
<div className="flex items-start gap-3 rounded-md border p-3 hover:bg-muted/50 transition-colors">
|
|
<div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center shrink-0 mt-0.5">
|
|
<Icon className="h-4 w-4" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm font-medium">{notification.title}</span>
|
|
{!notification.read && <span className="h-2 w-2 rounded-full bg-primary shrink-0" />}
|
|
</div>
|
|
<p className="text-sm text-muted-foreground mt-0.5">{notification.content}</p>
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
{new Date(notification.createdAt).toLocaleString("zh-CN")}
|
|
</p>
|
|
</div>
|
|
<Badge variant="outline" className="text-[10px] shrink-0">
|
|
{typeLabels[notification.type]}
|
|
</Badge>
|
|
</div>
|
|
)
|
|
|
|
return notification.link ? <Link href={notification.link}>{content}</Link> : content
|
|
}
|
|
|
|
export default function NotificationsPage() {
|
|
const unreadCount = mockNotifications.filter((n) => !n.read).length
|
|
const orderNotifs = mockNotifications.filter((n) => n.type === "order")
|
|
const communityNotifs = mockNotifications.filter((n) => n.type === "community")
|
|
const systemNotifs = mockNotifications.filter((n) => n.type === "system")
|
|
|
|
return (
|
|
<div className="max-w-2xl space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<h1 className="text-2xl font-bold">通知中心</h1>
|
|
{unreadCount > 0 && <Badge>{unreadCount} 条未读</Badge>}
|
|
</div>
|
|
<Button variant="outline" size="sm">
|
|
<CheckCheck className="mr-1 h-4 w-4" />
|
|
全部已读
|
|
</Button>
|
|
</div>
|
|
|
|
<Tabs defaultValue="all">
|
|
<TabsList>
|
|
<TabsTrigger value="all">全部</TabsTrigger>
|
|
<TabsTrigger value="order">订单</TabsTrigger>
|
|
<TabsTrigger value="community">社区</TabsTrigger>
|
|
<TabsTrigger value="system">系统</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="all" className="space-y-2 mt-4">
|
|
{mockNotifications.map((n) => (
|
|
<NotificationItem key={n.id} notification={n} />
|
|
))}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="order" className="space-y-2 mt-4">
|
|
{orderNotifs.length === 0 ? (
|
|
<Card>
|
|
<CardContent className="py-8 text-center text-sm text-muted-foreground">
|
|
暂无订单通知
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
orderNotifs.map((n) => <NotificationItem key={n.id} notification={n} />)
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="community" className="space-y-2 mt-4">
|
|
{communityNotifs.length === 0 ? (
|
|
<Card>
|
|
<CardContent className="py-8 text-center text-sm text-muted-foreground">
|
|
暂无社区通知
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
communityNotifs.map((n) => <NotificationItem key={n.id} notification={n} />)
|
|
)}
|
|
</TabsContent>
|
|
|
|
<TabsContent value="system" className="space-y-2 mt-4">
|
|
{systemNotifs.length === 0 ? (
|
|
<Card>
|
|
<CardContent className="py-8 text-center text-sm text-muted-foreground">
|
|
暂无系统通知
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
systemNotifs.map((n) => <NotificationItem key={n.id} notification={n} />)
|
|
)}
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
)
|
|
}
|