created the notification ui

@/components/ui/avatar.jsx

@@ -0,0 +1,41 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "../../lib/utils";
+
+const Avatar = React.forwardRef(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

@/components/ui/popover.jsx

@@ -0,0 +1,32 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "../../lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = React.forwardRef(
+  ({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        ref={ref}
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

@/components/ui/separator.jsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "../../lib/utils";
+
+const Separator = React.forwardRef(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

components/Navbar.jsx

@@ -16,7 +16,7 @@ import {
 } from "../components/ui/sheet";
 import { AlignJustify } from "lucide-react";
 import { usePathname } from "next/navigation";
-
+import NotificationBar from "../components/Notification";
 const Navbar = () => {
   const [scrolled, setScrolled] = useState(false);
 
@@ -83,6 +83,7 @@ const Navbar = () => {
 
       {/* buttons */}
       <div className="hidden lg:flex items-center pt-2 gap-4 transition-all">
+        <NotificationBar />
         <Link href="https://discord.com/invite/rUYVa93Svr">
           <Button variant="outline" className="px-5 rounded-md">
             Join Community
@@ -92,14 +93,15 @@ const Navbar = () => {
       </div>
 
       {/* mobile nav menu */}
-      <div className="lg:hidden transition-all">
+      <div className="lg:hidden flex gap-8 items-center  transition-all">
+        <NotificationBar />
         <Sheet>
           <SheetTrigger asChild>
             <Button variant="outline">
               <AlignJustify />
             </Button>
           </SheetTrigger>
-          <SheetContent className="flex flex-col items-start justify-start">
+          <SheetContent className="flex flex-col items-start justify-start bg-black">
             <SheetHeader>
               <SheetTitle>
                 <ModeToggle />

components/Notification.jsx

@@ -0,0 +1,62 @@
+import { Check, Inbox, Megaphone, X } from "lucide-react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../@/components/ui/popover";
+import { Avatar, AvatarFallback, AvatarImage } from "../@/components/ui/avatar";
+import { Separator } from "../@/components/ui/separator";
+
+import demoData from "../lib/notification-demo.json";
+export default function NotificationBar() {
+  return (
+    <div>
+      <Popover>
+        <PopoverTrigger>
+          <div>
+            <Inbox />
+          </div>
+        </PopoverTrigger>
+        <PopoverContent className="duration-500 mt-4 border border-neutral-700 shadow-none rounded-md bg-black w-screen sm:w-fit sm:mx-12  ">
+          <div>
+            <p className="font-bold ">Notifications</p>
+
+            <Separator className="bg-neutral-600 mt-4 " />
+            <div className="flex flex-col gap-4  mt-6">
+              {demoData.map((e) => {
+                return (
+                  <div
+                    key={e.id}
+                    className={`${e.marked_as_read ? "opacity-50" : null} flex justify-between items-center`}
+                  >
+                    <div className="flex gap-2 w-fit h-fit ">
+                      <Avatar>
+                        <AvatarImage src="https://github.com/shadcn.png" />
+                        <AvatarFallback>CN</AvatarFallback>
+                      </Avatar>
+
+                      <div>
+                        <div className="flex gap-2 items-start">
+                          <p className="font-bold">{e.title}</p>
+                        </div>
+                        <p className="text-gray-300">{e.message}</p>
+                        <p className="text-sm text-gray-500">
+                          {new Date(e.timestamp).toLocaleDateString()}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div className=" w-fit flex gap-2">
+                      <Check className="text-green-700 cursor-pointer" />
+                      <X className="text-red-600 cursor-pointer" />
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

lib/notification-demo.json

@@ -0,0 +1,47 @@
+[
+  {
+    "id": 1,
+    "type": "message",
+    "title": "New Message",
+    "message": "You have received a new message from John Doe.",
+    "timestamp": "2024-06-17T10:15:00Z",
+    "marked_as_read": false,
+    "icon": "message-icon.png"
+  },
+  {
+    "id": 2,
+    "type": "alert",
+    "title": "Security Alert",
+    "message": "Suspicious login attempt detected on your account.",
+    "timestamp": "2024-06-16T22:30:00Z",
+    "marked_as_read": true,
+    "icon": "alert-icon.png"
+  },
+  {
+    "id": 3,
+    "type": "update",
+    "title": "System Update",
+    "message": "The system will undergo maintenance at midnight tonight.",
+    "timestamp": "2024-06-15T18:00:00Z",
+    "marked_as_read": false,
+    "icon": "update-icon.png"
+  },
+  {
+    "id": 4,
+    "type": "comment",
+    "title": "New Comment",
+    "message": "Someone replied to your confession post: 'Interesting thoughts!'",
+    "timestamp": "2024-06-17T09:20:00Z",
+    "marked_as_read": false,
+    "icon": "comment-icon.png"
+  },
+  {
+    "id": 5,
+    "type": "promo",
+    "title": "Limited-Time Offer",
+    "message": "Get 20% off on all SVG generation services today!",
+    "timestamp": "2024-06-17T08:00:00Z",
+    "marked_as_read": true,
+    "icon": "promo-icon.png"
+  }
+]