'use client'; import { Tabs, TabsContent, TabsList, TabsTrigger, Card, CardContent, CardHeader, ScrollFade, Button, Badge } from '@components'; import { useState } from 'react'; const INITIAL_NOTIFICATIONS = [ { id: 1, type: 'mention', message: 'Alex Kim mentioned you in "Q3 roadmap"', time: '2m ago', read: false }, { id: 2, type: 'task', message: 'Design review assigned to you', time: '18m ago', read: false }, { id: 3, type: 'system', message: 'Your weekly usage report is ready', time: '1h ago', read: false }, { id: 4, type: 'mention', message: 'Sam Chen replied to your comment', time: '3h ago', read: true }, { id: 5, type: 'task', message: 'Deploy checklist marked complete', time: '5h ago', read: true }, { id: 6, type: 'system', message: 'New login from a Chrome browser', time: '1d ago', read: true }, ]; const MentionIcon = () => ( ); const TaskIcon = () => ( ); const SystemIcon = () => ( ); const CheckIcon = () => ( ); const CloseIcon = () => ( ); const CaughtUpIcon = () => ( ); const TYPE_ICON = { mention: , task: , system: , }; const TYPE_STYLE = { mention: 'bg-brand/15 text-brand', task: 'bg-success-bg text-success', system: 'bg-warning-bg text-warning', }; export default function Example() { const [notifications, setNotifications] = useState(INITIAL_NOTIFICATIONS); const [filter, setFilter] = useState('all'); const unreadCount = notifications.filter((n) => !n.read).length; const markAsRead = (id) => { setNotifications((prev) => prev.map((n) => (n.id === id ? { ...n, read: true } : n))); }; const dismiss = (id) => { setNotifications((prev) => prev.filter((n) => n.id !== id)); }; const renderList = (items) => { if (items.length === 0) { return (

You're all caught up.

); } return (

{items.map((n) => (

{TYPE_ICON[n.type]}

{n.message}

{n.time}

{!n.read && ( )}

))}

); }; return (

Notifications

{unreadCount > 0 && {unreadCount} new}

All Unread {renderList(notifications)} {renderList(notifications.filter((n) => !n.read))} ); }

Filterable with actions

Installation

Demo