npx @sublay/cli add notifications-control

src/components/notifications-control/
├── index.ts                              # Barrel export (entry point)
├── components/
│   ├── notification-control.tsx          # Main dropdown control
│   ├── notification-list.tsx             # List with infinite scroll
│   ├── notification-item.tsx             # Individual notification row
│   └── notification-icon.tsx            # Type-based icon display
└── utils/
    └── notification-utils.ts             # Time formatting, text truncation

import NotificationControl from './components/notifications-control';
import { Bell } from 'lucide-react';

function Header() {
  const BellTrigger = ({ unreadCount }: { unreadCount: number }) => (
    <button className="relative p-2 hover:bg-gray-100 rounded-full">
      <Bell className="w-6 h-6" />
      {unreadCount > 0 && (
        <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
          {unreadCount}
        </span>
      )}
    </button>
  );

  return (
    <nav>
      <NotificationControl
        triggerComponent={BellTrigger}
        onNotificationClick={(notification) => {
          console.log('Clicked:', notification);
        }}
      />
    </nav>
  );
}

import { SublayProvider } from '@sublay/react-js';
import NotificationControl from './components/notifications-control';
import { Bell } from 'lucide-react';
import { useNavigate } from 'react-router-dom';

function App() {
  return (
    <SublayProvider projectId="your-project-id" signedToken={token}>
      <Header />
      <main>{/* Your app */}</main>
    </SublayProvider>
  );
}

function Header() {
  const navigate = useNavigate();

  const BellIcon = ({ unreadCount }: { unreadCount: number }) => (
    <button className="relative p-2 hover:bg-gray-100 rounded-full">
      <Bell className="w-6 h-6" />
      {unreadCount > 0 && (
        <span className="absolute top-0 right-0 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
          {unreadCount}
        </span>
      )}
    </button>
  );

  return (
    <header>
      <nav className="container mx-auto px-4 py-3 flex justify-between items-center">
        <h1>My App</h1>

        <NotificationControl
          triggerComponent={BellIcon}
          onNotificationClick={(notification) => {
            if (notification.type === 'comment-reply') {
              navigate(`/posts/${notification.metadata.entityId}`);
            } else if (notification.type === 'new-follow') {
              navigate(`/users/${notification.metadata.followerId}`);
            }
          }}
          onViewAllNotifications={() => navigate('/notifications')}
        />
      </nav>
    </header>
  );
}