PulseNotification

'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 notifications = [
    { id: 1, text: 'New deployment completed', time: '2m ago', type: 'success' },
    { id: 2, text: 'API rate limit warning', time: '15m ago', type: 'warning' },
    { id: 3, text: 'User feedback received', time: '1h ago', type: 'info' },
  ];
  const typeColors = { success: '#4ade80', warning: '#C9A84C', info: '#6366f1' };

  useEffect(() => {
    const t = setInterval(() => setPulse(p => !p), 2000);
    return () => clearInterval(t);
  }, []);

  return (
    <div style={{ position: 'relative', display: 'inline-block', fontFamily: 'system-ui, sans-serif' }}>
      <button
        onClick={() => { setOpen(!open); setCount(0); }}
        style={{
          background: 'rgba(255,255,255,0.05)',
          border: '1px solid rgba(255,255,255,0.1)',
          borderRadius: '12px',
          padding: '10px 14px',
          cursor: 'pointer',
          color: '#F5F5F0',
          fontSize: '20px',
          position: 'relative',
          transition: 'all 0.2s ease',
        }}
      >
        🔔
        {count > 0 && (
          <span style={{
            position: 'absolute', top: '-6px', right: '-6px',
            background: '#ef4444',
            color: 'white',
            borderRadius: '50%',
            width: '20px', height: '20px',
            fontSize: '11px', fontWeight: 700,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: pulse ? '0 0 0 4px rgba(239,68,68,0.25)' : '0 0 0 0px rgba(239,68,68,0)',
            transition: 'box-shadow 0.6s ease',
          }}>{count}</span>
        )}
      </button>
      {open && (
        <div style={{
          position: 'absolute', top: '52px', right: 0,
          background: '#111111',
          border: '1px solid rgba(255,255,255,0.1)',
          borderRadius: '16px',
          width: '320px',
          boxShadow: '0 20px 60px rgba(0,0,0,0.5)',
          overflow: 'hidden',
          zIndex: 100,
        }}>
          <div style={{ padding: '16px 20px', borderBottom: '1px solid rgba(255,255,255,0.06)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ color: '#F5F5F0', fontWeight: 700, fontSize: '14px' }}>Notifications</span>
            <span style={{ color: '#C9A84C', fontSize: '12px', cursor: 'pointer' }}>Mark all read</span>
          </div>
          {notifications.map(n => (
            <div key={n.id} style={{
              padding: '14px 20px',
              borderBottom: '1px solid rgba(255,255,255,0.04)',
              display: 'flex', gap: '12px', alignItems: 'flex-start',
              cursor: 'pointer',
              transition: 'background 0.2s',
            }}
              onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.03)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            >
              <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: typeColors[n.type], marginTop: '5px', flexShrink: 0 }} />
              <div>
                <p style={{ margin: 0, color: '#F5F5F0', fontSize: '13px', lineHeight: 1.5 }}>{n.text}</p>
                <p style={{ margin: '4px 0 0 0', color: 'rgba(245,245,240,0.4)', fontSize: '11px' }}>{n.time}</p>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

Component info

About

Animated notification bell with badge and dropdown