From 544fe8f5afb90aeecde857b91273e7da542ec59d Mon Sep 17 00:00:00 2001 From: goodness5 Date: Sun, 22 Oct 2023 16:27:05 +0100 Subject: [PATCH 1/3] fix: solved crazy notifications modal --- components/Modals/Notifications.tsx | 18 ++++++------ components/Navbars/TopBar.tsx | 45 +++++++++++++++++------------ 2 files changed, 36 insertions(+), 27 deletions(-) diff --git a/components/Modals/Notifications.tsx b/components/Modals/Notifications.tsx index 2d5433d6b..113d3107e 100644 --- a/components/Modals/Notifications.tsx +++ b/components/Modals/Notifications.tsx @@ -132,10 +132,10 @@ const Notifications: React.FC = ({ notificationsRef, unreadN ); return ( -
-
+ {/*
= ({ notificationsRef, unreadN className="border border-brand-green-primary outline:border-[1.2px] p-2 mb-4" /> -
-
    +
*/} +
    {filteredNotifications.map(notification => (
  • -

    +

    {notification.text}

    {new Date(notification.date).toLocaleString()}

    -
    + {/*
    {!notification.read && (
    markAsRead(notification.id)} className="text-green-500 cursor-pointer mr-2" />
    )} removeNotification(notification.id)} className="text-red-500 cursor-pointer" /> -
    +
    */}
    • ))}
diff --git a/components/Navbars/TopBar.tsx b/components/Navbars/TopBar.tsx index 6f787c91c..708700acb 100644 --- a/components/Navbars/TopBar.tsx +++ b/components/Navbars/TopBar.tsx @@ -199,7 +199,7 @@ function TopBar(props: { activePage: string; showDashBorad: boolean }) { {/* Right Items */} {/* Action Buttons */} {!globalAuth && ( -
+
- {/*
- - - 2 - +
+
+ + {unreadNotifications} + + Cart Icon +
+ {notificationMenu && +
- notify -
*/} + +
+} +
@@ -533,7 +539,9 @@ function TopBar(props: { activePage: string; showDashBorad: boolean }) { function AuthUser(): React.ReactNode { return ( + <> + -
+
{unreadNotifications} Cart Icon -{notificationMenu && -
- -
-}
@@ -580,6 +583,12 @@ function TopBar(props: { activePage: string; showDashBorad: boolean }) {
+ {/* {notificationMenu && +//
+ + +//
+} */} ); } From 837aca870dcb0b523b764e34366df04690304df1 Mon Sep 17 00:00:00 2001 From: goodness5 Date: Sun, 22 Oct 2023 19:28:58 +0100 Subject: [PATCH 2/3] fix: fixed notifications bug --- components/Modals/Notifications.tsx | 89 ++++++++++++++++------------- components/Navbars/TopBar.tsx | 40 ++++++------- public/boxnotify.svg | 7 +++ 3 files changed, 73 insertions(+), 63 deletions(-) create mode 100644 public/boxnotify.svg diff --git a/components/Modals/Notifications.tsx b/components/Modals/Notifications.tsx index 113d3107e..b65ab1006 100644 --- a/components/Modals/Notifications.tsx +++ b/components/Modals/Notifications.tsx @@ -1,9 +1,9 @@ import React, { useState, useEffect } from 'react'; import { FaCheckCircle, FaTimesCircle } from 'react-icons/fa'; - +import Image from 'next/image'; interface Notification { id: number; - text: string; + text: 'Good news!, Your order has been shipped and is on its way', read: boolean; date: string; } @@ -25,76 +25,95 @@ const Notifications: React.FC = ({ notificationsRef, unreadN return () => clearTimeout(timer); }, []); + const timeAgo = (dateString: string): string => { + const now: Date = new Date(); + const date = new Date(dateString); + const diff = now.getTime() - date.getTime(); + const seconds = Math.floor(diff / 1000); + const minutes = Math.floor(seconds / 60); + const hours = Math.floor(minutes / 60); + const days = Math.floor(hours / 24); + + if (days > 1) return `${days} days ago`; + if (days === 1) return '1 day ago'; + if (hours > 1) return `${hours} hours ago`; + if (hours === 1) return '1 hour ago'; + if (minutes > 1) return `${minutes} minutes ago`; + if (minutes === 1) return '1 minute ago'; + if (seconds > 1) return `${seconds} seconds ago`; + return 'just now'; + }; + const [notifications, setNotifications] = useState([ { id: 1, - text: 'Your item has been successfully delivered. Thank you for choosing our service. We hope you enjoy your purchase!', + text: 'Good news!, Your order has been shipped and is on its way', read: false, date: '2023-10-20T12:34:56Z' }, { id: 2, - text: 'Great news! Your shop has received a lot of visitors this week. Keep up the good work!', + text: 'Good news!, Your order has been shipped and is on its way', read: false, date: '2023-10-19T10:30:45Z' }, { id: 3, - text: 'New feature alert: Introducing a powerful search functionality to help you find products faster and easier.', + text: 'Good news!, Your order has been shipped and is on its way', read: false, date: '2023-10-18T08:45:32Z' }, { id: 4, - text: 'We have exciting promotions coming up. Stay tuned for exclusive discounts and special offers!', + text: 'Good news!, Your order has been shipped and is on its way', read: true, date: '2023-10-17T16:20:15Z' }, { id: 5, - text: 'Thank you for being a valued member of our community. We appreciate your continued support!', + text: 'Good news!, Your order has been shipped and is on its way', read: false, date: '2023-10-16T14:10:55Z' }, { id: 6, - text: 'Your recent purchase has earned you reward points. You can use them on your next order for great discounts!', + text: 'Good news!, Your order has been shipped and is on its way', read: true, date: '2023-10-15T12:15:42Z' }, { id: 7, - text: 'Exciting news! Our website is now available in multiple languages to serve you better.', + text: 'Good news!, Your order has been shipped and is on its way', read: true, date: '2023-10-14T11:05:30Z' }, { id: 8, - text: 'Special offer just for you! Use code SPECIAL10 for an extra 10% off on selected items.', + text: 'Good news!, Your order has been shipped and is on its way', read: true, date: '2023-10-13T09:40:25Z' }, { id: 9, - text: 'We are thrilled to announce our new collection. Explore the latest trends in fashion and style!', + text: 'Good news!, Your order has been shipped and is on its way', read: false, date: '2023-10-12T07:55:20Z' }, { id: 10, - text: 'Don\'t miss out! Limited stock available on our best-selling products. Grab yours now!', + text: 'Good news!, Your order has been shipped and is on its way', read: true, date: '2023-10-11T05:30:10Z' }, { id: 11, - text: 'Thank you for your feedback. Your input helps us improve our services for a better experience!', + text: 'Good news!, Your order has been shipped and is on its way', read: true, date: '2023-10-10T03:25:05Z' }, { id: 12, - text: 'New arrivals alert! Discover the hottest trends in fashion. Shop now and stay ahead of the curve!', + text: 'Good news!, Your order has been shipped and is on its way', read: false, date: '2023-10-09T01:15:00Z' } @@ -132,43 +151,35 @@ const Notifications: React.FC = ({ notificationsRef, unreadN ); return ( -
- {/*
- +
+

Notifications

- setSearchQuery(e.target.value)} - className="border border-brand-green-primary outline:border-[1.2px] p-2 mb-4" - /> - -
*/} + +
    {filteredNotifications.map(notification => (
  • -
    -

    +

    + +
    + icon +
    +
    +

    {notification.text}

    -

    - {new Date(notification.date).toLocaleString()} +

    + {timeAgo(notification.date)}

    - {/*
    - {!notification.read && ( -
    - markAsRead(notification.id)} className="text-green-500 cursor-pointer mr-2" /> -
    - )} - removeNotification(notification.id)} className="text-red-500 cursor-pointer" /> -
    */} +
    +
    • ))}
diff --git a/components/Navbars/TopBar.tsx b/components/Navbars/TopBar.tsx index 708700acb..08f1a2ec4 100644 --- a/components/Navbars/TopBar.tsx +++ b/components/Navbars/TopBar.tsx @@ -268,21 +268,17 @@ function TopBar(props: { activePage: string; showDashBorad: boolean }) { {!globalAuth && (
-
-
+ + - - {unreadNotifications} - - Cart Icon -
- {notificationMenu && -
+ + +{/* {notificationMenu && +
-} -
+ } */}
@@ -540,7 +531,7 @@ function TopBar(props: { activePage: string; showDashBorad: boolean }) { function AuthUser(): React.ReactNode { return ( - <> +
@@ -565,15 +556,15 @@ function TopBar(props: { activePage: string; showDashBorad: boolean }) { -
+
{unreadNotifications} Cart Icon -
+

@@ -583,13 +574,14 @@ function TopBar(props: { activePage: string; showDashBorad: boolean }) {

- {/* {notificationMenu && -//
+ + {notificationMenu && +
-//
-} */} - +
+} +
); } } diff --git a/public/boxnotify.svg b/public/boxnotify.svg new file mode 100644 index 000000000..749f39f93 --- /dev/null +++ b/public/boxnotify.svg @@ -0,0 +1,7 @@ + + + + + + + From 1ed00cc5789be19d0237432cf75b3026cc8d7a0c Mon Sep 17 00:00:00 2001 From: goodness5 Date: Sun, 22 Oct 2023 19:36:50 +0100 Subject: [PATCH 3/3] fix: added responsiveness and pixel perfect design --- components/Modals/Notifications.tsx | 2 +- components/Navbars/TopBar.tsx | 11 +++++++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/components/Modals/Notifications.tsx b/components/Modals/Notifications.tsx index b65ab1006..b6d8dacdd 100644 --- a/components/Modals/Notifications.tsx +++ b/components/Modals/Notifications.tsx @@ -151,7 +151,7 @@ const Notifications: React.FC = ({ notificationsRef, unreadN ); return ( -
diff --git a/components/Navbars/TopBar.tsx b/components/Navbars/TopBar.tsx index 08f1a2ec4..c60505d0b 100644 --- a/components/Navbars/TopBar.tsx +++ b/components/Navbars/TopBar.tsx @@ -524,6 +524,13 @@ function TopBar(props: { activePage: string; showDashBorad: boolean }) {
)} + +{notificationMenu && +
+ + +
+} ); @@ -575,12 +582,12 @@ function TopBar(props: { activePage: string; showDashBorad: boolean }) {
- {notificationMenu && + {/* {notificationMenu &&
-} +} */}
); }