Notification Menu

Preview

Usage

import { NotificationMenu } from "@/components/docs/notification"

export default function App() {
  return (
    <div className="flex justify-end p-4 min-h-[400px]">
      <NotificationMenu
        avatarSrc="/img.png"
        userLabel="John Doe"
        userSubLabel="john@example.com"
        menuItems={[
          { id: "profile", label: "Profile" },
          { id: "settings", label: "Settings" },
        ]}
        workspaces={[
          { id: "ws1", label: "Personal" },
          { id: "ws2", label: "Team" },
        ]}
        onLogout={() => console.log("Logout")}
      />
    </div>
  )
}

API

Prop	Type	Description
avatarSrc	string	URL of the user's avatar image.
userLabel	string	Main text label (e.g., user name).
userSubLabel	string	Secondary text label (e.g., email).
menuItems	NotificationMenuItem[]	Array of menu items to display.
workspaces	NotificationWorkspaceItem[]	Optional array of workspaces.
onCreateWorkspace	() => void	Callback for creating a new workspace.
onLogout	() => void	Callback for the logout action.
open	boolean	Controlled open state.
onOpenChange	(open: boolean) => void	Callback for open state changes.