SocialShare

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

const PLATFORMS = [
  { id:'twitter', label:'Twitter', icon:'🐦', color:'#1da1f2', count:248 },
  { id:'linkedin', label:'LinkedIn', icon:'💼', color:'#0a66c2', count:127 },
  { id:'reddit', label:'Reddit', icon:'🤖', color:'#ff4500', count:89 },
  { id:'copy', label:'Copy Link', icon:'🔗', color:'#6d28d9', count:0 },
]

export default function SocialShare({ url = 'https://empire-ui.com' }) {
  const [shared, setShared] = useState(new Set())
  const handleShare = (id) => {
    setShared(s => new Set([...s, id]))
  }
  return (
    <div style={{ display:'flex', gap:'10px', flexWrap:'wrap' }}>
      {PLATFORMS.map(p => (
        <button key={p.id} onClick={() => handleShare(p.id)} style={{
          display:'flex', alignItems:'center', gap:'8px',
          background:shared.has(p.id) ? p.color : '#f8fafc',
          color:shared.has(p.id) ? '#fff' : '#374151',
          border:'1px solid ' + (shared.has(p.id) ? p.color : '#e2e8f0'),
          borderRadius:'10px', padding:'8px 14px',
          cursor:'pointer', fontSize:'13px', fontWeight:600,
          transition:'all 0.2s',
        }}>
          <span style={{ fontSize:'16px' }}>{p.icon}</span>
          {p.label}
          {p.count > 0 && (
            <span style={{
              background:shared.has(p.id) ? 'rgba(255,255,255,0.3)' : '#e2e8f0',
              padding:'2px 6px', borderRadius:'9999px', fontSize:'11px',
            }}>{p.count + (shared.has(p.id) ? 1 : 0)}</span>
          )}
        </button>
      ))}
    </div>
  )
}

Component info

About

Social sharing buttons for major platforms with share counts