BadgeShowcase

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

export default function BadgeShowcase() {
  const [tags, setTags] = useState(['React', 'TypeScript', 'Next.js', 'Tailwind', 'Prisma'])
  const [count, setCount] = useState(12)

  return (
    <div style={{ padding: 40, background: '#0A0A0A', display: 'flex', flexDirection: 'column', gap: 32, minHeight: 300 }}>

      {/* Status Badges */}
      <div>
        <div style={{ color: 'rgba(255,255,255,0.4)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 12 }}>Status Badges</div>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {[
            { label: 'Published', color: '#22c55e' }, { label: 'Draft', color: '#6366f1' },
            { label: 'Archived', color: '#64748b' }, { label: 'Review', color: '#f59e0b' },
            { label: 'Blacklisted', color: '#ef4444' }, { label: 'Pro', color: '#C9A84C' },
          ].map(b => (
            <span key={b.label} style={{ background: b.color + '18', border: `1px solid ${b.color}40`, color: b.color, padding: '3px 10px', borderRadius: 20, fontSize: 12, fontWeight: 600 }}>{b.label}</span>
          ))}
        </div>
      </div>

      {/* Dot Badges */}
      <div>
        <div style={{ color: 'rgba(255,255,255,0.4)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 12 }}>Dot Indicators</div>
        <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
          {[
            { label: 'Online', color: '#22c55e' }, { label: 'Away', color: '#f59e0b' },
            { label: 'Busy', color: '#ef4444' }, { label: 'Offline', color: '#64748b' },
          ].map(b => (
            <div key={b.label} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: b.color, boxShadow: `0 0 6px ${b.color}`, display: 'inline-block' }} />
              <span style={{ color: '#F5F5F0', fontSize: 13 }}>{b.label}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Count Badge + Ping */}
      <div>
        <div style={{ color: 'rgba(255,255,255,0.4)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 12 }}>Notification Count</div>
        <div style={{ display: 'flex', gap: 20, alignItems: 'center', flexWrap: 'wrap' }}>
          <div style={{ position: 'relative', display: 'inline-flex' }}>
            <button onClick={() => setCount(c => c + 1)} style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', color: '#F5F5F0', borderRadius: 8, padding: '8px 16px', cursor: 'pointer', fontSize: 13 }}>🔔 Notifications</button>
            {count > 0 && <span style={{ position: 'absolute', top: -8, right: -8, background: '#ef4444', color: '#fff', borderRadius: '50%', minWidth: 20, height: 20, fontSize: 11, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2px solid #0A0A0A', padding: '0 3px' }}>{count > 99 ? '99+' : count}</span>}
          </div>
          <div style={{ position: 'relative', display: 'inline-flex' }}>
            <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'linear-gradient(135deg, #C9A84C, #6366f1)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18 }}>U</div>
            <span style={{ position: 'absolute', bottom: 0, right: 0, width: 12, height: 12, background: '#22c55e', borderRadius: '50%', border: '2px solid #0A0A0A', animation: 'ping 2s infinite' }} />
          </div>
        </div>
      </div>

      {/* Removable Tags */}
      <div>
        <div style={{ color: 'rgba(255,255,255,0.4)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 12 }}>Removable Tags</div>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {tags.map(tag => (
            <span key={tag} style={{ background: 'rgba(99,102,241,0.12)', border: '1px solid rgba(99,102,241,0.25)', color: '#a5b4fc', padding: '4px 10px', borderRadius: 20, fontSize: 12, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 6 }}>
              {tag}
              <button onClick={() => setTags(t => t.filter(x => x !== tag))} style={{ background: 'none', border: 'none', color: 'rgba(165,180,252,0.6)', cursor: 'pointer', padding: 0, lineHeight: 1, fontSize: 14 }}>×</button>
            </span>
          ))}
          {tags.length === 0 && <span style={{ color: 'rgba(255,255,255,0.3)', fontSize: 13 }}>All tags removed</span>}
        </div>
      </div>

      <style>{`@keyframes ping { 0% { transform: scale(1); opacity: 1 } 75%, 100% { transform: scale(2); opacity: 0 } }`}</style>
    </div>
  )
}

Component info

About

Badge and chip component collection: status, count, dot, animated ping, and removable tags