Refactor UI components, add notification bell icon and count

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>

src/components/navigationBar/nav.tsx

@@ -45,8 +45,10 @@ const landings = [
     route: "/crm-landing",
   },
 ];
-const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWithoutRef<"a">>(
+const ListItem = React.forwardRef<
-  ({ className, title, children, ...props }, ref) => {
+  React.ElementRef<"a">,
+  React.ComponentPropsWithoutRef<"a">
+>(({ className, title, children, ...props }, ref) => {
   return (
     <li>
       <NavigationMenuLink asChild>
@@ -56,16 +58,18 @@ const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWit
             "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}>
+          {...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>
+          <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>