129 lines
4.4 KiB
TypeScript
129 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Bell } from "lucide-react";
|
|
import { useAppTheme } from "@/components/ThemeProvider";
|
|
|
|
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;
|
|
const { theme } = useAppTheme();
|
|
const isDark = theme === "dark";
|
|
|
|
return (
|
|
<div className={`min-h-screen ${isDark ? "bg-gray-900" : "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 ${isDark ? "text-white" : "text-gray-900"}`} />
|
|
<h1 className={`text-xl sm:text-2xl font-semibold ${isDark ? "text-white" : "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={`rounded-lg border overflow-hidden ${isDark ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"}`}>
|
|
{notifications.length === 0 ? (
|
|
<div className={`p-8 sm:p-12 text-center ${isDark ? "text-gray-400" : "text-gray-500"}`}>
|
|
<Bell className={`w-12 h-12 mx-auto mb-2 ${isDark ? "text-gray-600" : "text-gray-300"}`} />
|
|
<p className="text-sm">No notifications</p>
|
|
</div>
|
|
) : (
|
|
<div className={`divide-y ${isDark ? "divide-gray-700" : ""}`}>
|
|
{notifications.map((notification) => {
|
|
return (
|
|
<div
|
|
key={notification.id}
|
|
className={`p-4 sm:p-6 transition-colors cursor-pointer ${
|
|
!notification.read
|
|
? isDark
|
|
? "bg-rose-500/10"
|
|
: "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 ${isDark ? "text-white" : "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 mt-1 ${isDark ? "text-gray-400" : "text-gray-600"}`}>
|
|
{notification.message}
|
|
</p>
|
|
<p className={`text-xs mt-1 ${isDark ? "text-gray-500" : "text-gray-400"}`}>
|
|
{notification.time}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|