122 lines
3.8 KiB
TypeScript
122 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Bell } from "lucide-react";
|
|
|
|
interface Notification {
|
|
id: string;
|
|
title: string;
|
|
message: string;
|
|
time: string;
|
|
read: boolean;
|
|
}
|
|
|
|
export default function NotificationsPage() {
|
|
const [notifications, setNotifications] = useState<Notification[]>([
|
|
{
|
|
id: "1",
|
|
title: "New appointment scheduled",
|
|
message: "John Smith booked an appointment for tomorrow",
|
|
time: "2 hours ago",
|
|
read: false,
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Payment received",
|
|
message: "Payment of $150 received from Jane Doe",
|
|
time: "5 hours ago",
|
|
read: false,
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "Appointment Reminder",
|
|
message: "You have an appointment in 30 minutes with Emily Davis",
|
|
time: "3 hours ago",
|
|
read: false,
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "New Message",
|
|
message: "You received a new message from John Smith",
|
|
time: "5 hours ago",
|
|
read: true,
|
|
},
|
|
{
|
|
id: "5",
|
|
title: "Appointment Cancelled",
|
|
message: "Robert Wilson cancelled his appointment scheduled for tomorrow",
|
|
time: "1 day ago",
|
|
read: true,
|
|
},
|
|
]);
|
|
|
|
const unreadCount = notifications.filter((n) => !n.read).length;
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
{/* Main Content */}
|
|
<main className="p-3 sm:p-4 md:p-6 lg:p-8">
|
|
{/* Page Header */}
|
|
<div className="mb-4 sm:mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
|
|
<div className="flex items-center gap-3">
|
|
<Bell className="w-5 h-5 sm:w-6 sm:h-6 text-gray-900" />
|
|
<h1 className="text-xl sm:text-2xl font-semibold text-gray-900">
|
|
Notifications
|
|
</h1>
|
|
{unreadCount > 0 && (
|
|
<span className="px-2 py-1 text-xs font-medium bg-rose-100 text-rose-700 rounded-full">
|
|
{unreadCount} new
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Notifications List */}
|
|
<div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
|
|
{notifications.length === 0 ? (
|
|
<div className="p-8 sm:p-12 text-center text-gray-500">
|
|
<Bell className="w-12 h-12 mx-auto mb-2 text-gray-300" />
|
|
<p className="text-sm">No notifications</p>
|
|
</div>
|
|
) : (
|
|
<div className="divide-y">
|
|
{notifications.map((notification) => {
|
|
return (
|
|
<div
|
|
key={notification.id}
|
|
className={`p-4 sm:p-6 hover:bg-gray-50 transition-colors cursor-pointer ${
|
|
!notification.read ? "bg-rose-50/50" : ""
|
|
}`}
|
|
>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<p
|
|
className={`text-sm sm:text-base font-medium text-gray-900 ${
|
|
!notification.read ? "font-semibold" : ""
|
|
}`}
|
|
>
|
|
{notification.title}
|
|
</p>
|
|
{!notification.read && (
|
|
<span className="shrink-0 w-2 h-2 bg-green-500 rounded-full mt-1"></span>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-gray-600 mt-1">
|
|
{notification.message}
|
|
</p>
|
|
<p className="text-xs text-gray-400 mt-1">
|
|
{notification.time}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|