From 60c9af32142856521a66829fce9489db86a3b35f Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Fri, 13 Sep 2024 14:02:43 +0700
Subject: [PATCH] Refactor notification page UI components, remove unnecessary
 imports and update notification card layout

---
 src/app/notification/page.tsx | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/app/notification/page.tsx b/src/app/notification/page.tsx
index 054ef48..40a0187 100644
--- a/src/app/notification/page.tsx
+++ b/src/app/notification/page.tsx
@@ -19,22 +19,24 @@ export default function Notification() {
             <CardContent>
               <Card>
                 <CardContent>
-                {sampleNotifications.map((notification, index) => (
-                  <div key={index} className="flex items-center justify-between p-4 bg-white border-b border-gray-200">
-                    <div className="flex items-center">
-                      <BellIcon className="w-5 h-5 text-blue-500 mr-3" />
-                      <div>
-                        <p className="text-sm font-medium text-gray-900">
-                          {notification.message}
-                        </p>
-                        <p className="text-xs text-gray-500">{notification.time}</p>
+                  {sampleNotifications.map((notification, _) => (
+                    <div className="flex items-center justify-between p-4  border-b border-gray-200">
+                      <div className="flex items-center">
+                        <BellIcon className="w-5 h-5 text-blue-500 mr-3" />
+                        <div>
+                          <p className="text-sm font-medium ">
+                            {notification.message}
+                          </p>
+                          <p className="text-xs text-gray-500">
+                            {notification.time}
+                          </p>
+                        </div>
                       </div>
+                      <button className="text-sm text-blue-500 hover:text-blue-600">
+                        Mark as read
+                      </button>
                     </div>
-                    <button className="text-sm text-blue-500 hover:text-blue-600">
-                      Mark as read
-                    </button>
-                  </div>
-                ))}
+                  ))}
                 </CardContent>
               </Card>
             </CardContent>