From 72d72a550e9a6262a3760c005c31a6a8090b9fd1 Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Fri, 13 Sep 2024 13:56:58 +0700
Subject: [PATCH] Refactor UI components, add notification bell icon and count

---
 src/app/notification/page.tsx        |  20 +++++-
 src/components/navigationBar/nav.tsx | 102 +++++++++++++++++++--------
 2 files changed, 90 insertions(+), 32 deletions(-)

diff --git a/src/app/notification/page.tsx b/src/app/notification/page.tsx
index e4433c5..054ef48 100644
--- a/src/app/notification/page.tsx
+++ b/src/app/notification/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { Card, CardContent } from "@/components/ui/card";
+import { BellIcon } from "lucide-react";
 
 export default function Notification() {
   const sampleNotifications = [
@@ -17,7 +18,24 @@ export default function Notification() {
           <Card className=" border-slate-800 w-3/4 p-6">
             <CardContent>
               <Card>
-                <CardContent>1</CardContent>
+                <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>
+                      </div>
+                    </div>
+                    <button className="text-sm text-blue-500 hover:text-blue-600">
+                      Mark as read
+                    </button>
+                  </div>
+                ))}
+                </CardContent>
               </Card>
             </CardContent>
           </Card>
diff --git a/src/components/navigationBar/nav.tsx b/src/components/navigationBar/nav.tsx
index fac2336..ec17864 100644
--- a/src/components/navigationBar/nav.tsx
+++ b/src/components/navigationBar/nav.tsx
@@ -45,27 +45,31 @@ const landings = [
     route: "/crm-landing",
   },
 ];
-const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWithoutRef<"a">>(
-  ({ className, title, children, ...props }, ref) => {
-    return (
-      <li>
-        <NavigationMenuLink asChild>
-          <a
-            ref={ref}
-            className={cn(
-              "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-              className
-            )}
-            {...props}>
-            <div className="text-sm font-medium leading-none">{title}</div>
-            <hr />
-            <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">{children}</p>
-          </a>
-        </NavigationMenuLink>
-      </li>
-    );
-  }
-);
+const ListItem = React.forwardRef<
+  React.ElementRef<"a">,
+  React.ComponentPropsWithoutRef<"a">
+>(({ className, title, children, ...props }, ref) => {
+  return (
+    <li>
+      <NavigationMenuLink asChild>
+        <a
+          ref={ref}
+          className={cn(
+            "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+            className
+          )}
+          {...props}
+        >
+          <div className="text-sm font-medium leading-none">{title}</div>
+          <hr />
+          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+            {children}
+          </p>
+        </a>
+      </NavigationMenuLink>
+    </li>
+  );
+});
 ListItem.displayName = "ListItem";
 
 const unAuthenticatedComponents = () => {
@@ -82,14 +86,28 @@ const unAuthenticatedComponents = () => {
 };
 
 const authenticatedComponents = () => {
+  let notifications = 100;
+  const displayValue = notifications >= 100 ? "..." : notifications;
   return (
     <div className="flex gap-3 pl-2 items-center">
-      <Bell />
+      <Link href={"/notification"}>
+        {" "}
+        <div className="relative inline-block">
+          <Bell className="h-6 w-6" />
+          <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full">
+            {displayValue}
+          </span>
+        </div>
+      </Link>
       <Heart />
       <Wallet />
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="outline" size="icon" className="overflow-hidden rounded-full">
+          <Button
+            variant="outline"
+            size="icon"
+            className="overflow-hidden rounded-full"
+          >
             <Avatar>
               <AvatarImage src="https://api.dicebear.com/9.x/pixel-art/svg" />
               <AvatarFallback>1</AvatarFallback>
@@ -153,7 +171,8 @@ export function NavigationBar() {
             <Link
               className="flex-none text-xl font-semibold dark:text-white focus:outline-none focus:opacity-80"
               href="/"
-              aria-label="Brand">
+              aria-label="Brand"
+            >
               <span className="inline-flex items-center gap-x-2 text-xl font-semibold dark:text-white">
                 <Image src="./logo.svg" alt="logo" width={50} height={50} />
                 B2DVentures
@@ -165,11 +184,17 @@ export function NavigationBar() {
             <NavigationMenu>
               <NavigationMenuList>
                 <NavigationMenuItem>
-                  <NavigationMenuTrigger className="text-base">Businesses</NavigationMenuTrigger>
+                  <NavigationMenuTrigger className="text-base">
+                    Businesses
+                  </NavigationMenuTrigger>
                   <NavigationMenuContent>
                     <ul className="grid w-[400px] ">
                       {businessComponents.map((component) => (
-                        <ListItem key={component.title} title={component.title} href={component.href}>
+                        <ListItem
+                          key={component.title}
+                          title={component.title}
+                          href={component.href}
+                        >
                           {component.description}
                         </ListItem>
                       ))}
@@ -178,11 +203,17 @@ export function NavigationBar() {
                 </NavigationMenuItem>
 
                 <NavigationMenuItem>
-                  <NavigationMenuTrigger className="text-base font-medium ">Projects</NavigationMenuTrigger>
+                  <NavigationMenuTrigger className="text-base font-medium ">
+                    Projects
+                  </NavigationMenuTrigger>
                   <NavigationMenuContent>
                     <ul className="grid w-[400px] ">
                       {projectComponents.map((component) => (
-                        <ListItem key={component.title} title={component.title} href={component.href}>
+                        <ListItem
+                          key={component.title}
+                          title={component.title}
+                          href={component.href}
+                        >
                           {component.description}
                         </ListItem>
                       ))}
@@ -191,11 +222,17 @@ export function NavigationBar() {
                 </NavigationMenuItem>
 
                 <NavigationMenuItem>
-                  <NavigationMenuTrigger className="text-base">Blogs</NavigationMenuTrigger>
+                  <NavigationMenuTrigger className="text-base">
+                    Blogs
+                  </NavigationMenuTrigger>
                   <NavigationMenuContent>
                     <ul className="grid w-[400px] ">
                       {blogComponents.map((component) => (
-                        <ListItem key={component.title} title={component.title} href={component.href}>
+                        <ListItem
+                          key={component.title}
+                          title={component.title}
+                          href={component.href}
+                        >
                           {component.description}
                         </ListItem>
                       ))}
@@ -204,7 +241,10 @@ export function NavigationBar() {
                 </NavigationMenuItem>
 
                 <NavigationMenuItem>
-                  <NavigationMenuLink className="text-base font-medium" href="docs">
+                  <NavigationMenuLink
+                    className="text-base font-medium"
+                    href="docs"
+                  >
                     Docs
                   </NavigationMenuLink>
                 </NavigationMenuItem>