diff --git a/public/coming-soon.png b/public/coming-soon.png new file mode 100644 index 0000000..4d9958d Binary files /dev/null and b/public/coming-soon.png differ diff --git a/src/app/dashboard/components/notification-detail.tsx b/src/app/dashboard/components/notification-detail.tsx new file mode 100644 index 0000000..dd04e4f --- /dev/null +++ b/src/app/dashboard/components/notification-detail.tsx @@ -0,0 +1,83 @@ +"use client"; + +import { Button } from "@/components/ui/button"; +import { ArrowLeft, Trash2 } from "lucide-react"; +import Image from "next/image"; + +interface NotificationDetailProps { + notification: { + id: number; + title: string; + time: string; + date: string; + }; + onBack: () => void; + onDelete: (id: number) => void; +} + +export default function NotificationDetail({ + notification, + onBack, + onDelete, +}: NotificationDetailProps) { + return ( +
+
+
+
+ + +
+ +
+
+

+ New Update for Writers +

+

+ Step up your writing with our latest update +

+
+ +
+ Notification Banner +
+ +
+

+ Compete against players worldwide, climb the global rankings, and + prove your skills. Test your strategy, outmaneuver your opponents, + and claim your place at the top. Glory awaits! +

+
+ +
+

+ Sent: {notification.date} {notification.time} +

+
+
+
+
+ ); +} diff --git a/src/app/dashboard/notifications/page.tsx b/src/app/dashboard/notifications/page.tsx index 8cf996c..0eb87ed 100644 --- a/src/app/dashboard/notifications/page.tsx +++ b/src/app/dashboard/notifications/page.tsx @@ -1,11 +1,171 @@ +"use client"; +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { ChevronDown, Check } from "lucide-react"; +import Avatar from "@mui/material/Avatar"; +import { useState } from "react"; +import NotificationDetail from "../components/notification-detail"; + +export default function Component() { + const notifications = [ + { + id: 1, + title: "New updates for Writers", + time: "12:16 PM", + isNew: true, + date: "Today", + }, + { + id: 2, + title: "New updates for Writers", + time: "12:19 PM", + isNew: true, + date: "Today", + }, + { + id: 3, + title: "New updates for Writers", + time: "12:16 PM", + isNew: true, + date: "Yesterday", + }, + { + id: 4, + title: "New updates for Writers", + time: "12:19 PM", + isNew: true, + date: "Yesterday", + }, + { + id: 5, + title: "New updates for Writers", + time: "12:25 PM", + isNew: true, + date: "Yesterday", + }, + { + id: 6, + title: "New updates for Writers", + time: "12:19 PM", + isNew: true, + date: "12 April, 2025", + }, + ]; + + const [selectedNotification, setSelectedNotification] = useState< + (typeof notifications)[0] | null + >(null); + + const handleViewDetails = (notification: (typeof notifications)[0]) => { + setSelectedNotification(notification); + }; + + const handleBack = () => { + setSelectedNotification(null); + }; + + const handleDelete = (id: number) => { + console.log("Delete notification:", id); + setSelectedNotification(null); + }; + + const groupedNotifications = notifications.reduce((acc, notification) => { + if (!acc[notification.date]) { + acc[notification.date] = []; + } + acc[notification.date].push(notification); + return acc; + }, {} as Record); -function NotificationsPage() { return ( -
-

Notifications

-

This is the notifications page.

-
+
+
+
+
+

+ All Notifications (7) +

+
+
+ + +
+
+ +
+ {Object.entries(groupedNotifications).map(([date, notifications]) => ( +
+
+

+ {date} +

+
+
+ {notifications.map((notification) => ( +
+ + W + +
+
+ + {notification.title} + + {notification.isNew && ( + + New + + )} +
+

+ {notification.time} +

+
+ +
+ ))} +
+
+ ))} +
+
+ {selectedNotification && ( +
+ +
+ )} +
); } -export default NotificationsPage; \ No newline at end of file