NotificationCenter

notificationcenter-1779394025602.tsx

'use client'
import { useState } from 'react'

const NOTIFS = [
  { id:1, title:'New comment on your post', body:'Alice replied to your dashboard query', icon:'💬', read:false, time:'2m' },
  { id:2, title:'Payment received', body:'You received $299 from Bob Chen', icon:'💰', read:false, time:'1h' },
  { id:3, title:'Build succeeded', body:'Production deploy v2.4.0 is live', icon:'✅', read:true, time:'3h' },
  { id:4, title:'New follower', body:'Carol White is now following you', icon:'👤', read:true, time:'1d' },
]

export default function NotificationCenter() {
  const [notifs, setNotifs] = useState(NOTIFS)
  const unread = notifs.filter(n => !n.read).length
  const markAll = () => setNotifs(n => n.map(x => ({ ...x, read:true })))
  const markOne = (id) => setNotifs(n => n.map(x => x.id===id ? { ...x, read:true } : x))
  return (
    <div style={{ background:'#fff', borderRadius:'16px', boxShadow:'0 4px 24px rgba(0,0,0,0.1)', maxWidth:'360px', overflow:'hidden' }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'16px 18px', borderBottom:'1px solid #f1f5f9' }}>
        <div style={{ display:'flex', alignItems:'center', gap:'8px' }}>
          <span style={{ fontWeight:700, fontSize:'15px', color:'#1e293b' }}>Notifications</span>
          {unread > 0 && <span style={{ background:'#6d28d9', color:'#fff', borderRadius:'9999px', padding:'2px 7px', fontSize:'11px', fontWeight:700 }}>{unread}</span>}
        </div>
        {unread > 0 && <button onClick={markAll} style={{ background:'none', border:'none', color:'#6d28d9', fontSize:'12px', fontWeight:600, cursor:'pointer' }}>Mark all read</button>}
      </div>
      {notifs.map(n => (
        <div key={n.id} onClick={() => markOne(n.id)} style={{
          display:'flex', gap:'12px', padding:'14px 18px',
          background:n.read ? '#fff' : '#faf5ff', cursor:'pointer',
          borderBottom:'1px solid #f8fafc', transition:'background 0.15s',
        }}>
          <div style={{ fontSize:'24px', flexShrink:0, marginTop:'2px' }}>{n.icon}</div>
          <div style={{ flex:1, minWidth:0 }}>
            <div style={{ fontSize:'13px', fontWeight:n.read ? 400 : 700, color:'#1e293b' }}>{n.title}</div>
            <div style={{ fontSize:'12px', color:'#64748b', marginTop:'2px', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{n.body}</div>
          </div>
          <div style={{ display:'flex', flexDirection:'column', alignItems:'flex-end', gap:'6px', flexShrink:0 }}>
            <span style={{ fontSize:'11px', color:'#94a3b8' }}>{n.time}</span>
            {!n.read && <div style={{ width:'8px', height:'8px', borderRadius:'50%', background:'#6d28d9' }} />}
          </div>
        </div>
      ))}
    </div>
  )
}

Component info

CategoryNotifications

Frameworkreact

TierFREE

Copies0

About

Notification panel with read/unread states and categories

More from Notifications

'use client'
import { useState, useCallback } from 'react'

type ToastType = 'success' | 'error' | 'warning' | 'info'

interface Toast {
  id: number
  type: ToastType
  title: string
  message?: string
}

const CONFIGS = {
  success: { icon: '✓', co

ToastStack

Notifications

'use client';
import { useState, useEffect } from 'react';

export default function PulseNotification() {
  const [open, setOpen] = useState(false);
  const [count, setCount] = useState(3);
  const [pulse, setPulse] = useState(true);
  const notifica

PulseNotification

Notifications

'use client'
import { useState, useCallback } from 'react'

export default function ToastStack() {
  const [toasts, setToasts] = useState([
    { id: 1, message: 'Component saved!', type: 'success' },
    { id: 2, message: 'Update available', type: '

ToastStack

Notifications