SocialSharePanel

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

const PLATFORMS = [
  { name: 'Twitter / X', icon: '𝕏', color: '#F5F5F0', bg: '#1a1a1a', count: 847 },
  { name: 'LinkedIn', icon: 'in', color: '#0a66c2', bg: 'rgba(10,102,194,0.1)', count: 234 },
  { name: 'Reddit', icon: '🤖', color: '#ff4500', bg: 'rgba(255,69,0,0.1)', count: 1203 },
  { name: 'HackerNews', icon: 'Y', color: '#ff6600', bg: 'rgba(255,102,0,0.1)', count: 456 },
  { name: 'Dev.to', icon: 'DEV', color: '#F5F5F0', bg: 'rgba(255,255,255,0.06)', count: 92 },
]

function AnimatedCount({ n }: { n: number }) {
  const [shown, setShown] = useState(false)
  const fmt = n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n)
  return <span onMouseEnter={() => setShown(true)} onMouseLeave={() => setShown(false)} style={{ cursor: 'default' }}>{shown ? n.toLocaleString() : fmt}</span>
}

export default function SocialSharePanel() {
  const [copied, setCopied] = useState(false)
  const url = 'https://empire-ui.com/components/glow-button'

  function copy() {
    navigator.clipboard.writeText(url)
    setCopied(true)
    setTimeout(() => setCopied(false), 2500)
  }

  return (
    <div style={{ padding: 40, background: '#0A0A0A', display: 'flex', justifyContent: 'center' }}>
      <div style={{ width: 380 }}>
        <div style={{ color: '#F5F5F0', fontSize: 18, fontWeight: 700, marginBottom: 4 }}>Share this component</div>
        <div style={{ color: 'rgba(255,255,255,0.4)', fontSize: 13, marginBottom: 24 }}>Help others discover Empire UI</div>

        {/* Link copy */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 24 }}>
          <div style={{ flex: 1, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 8, padding: '10px 14px', fontSize: 13, color: 'rgba(255,255,255,0.5)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{url}</div>
          <button onClick={copy} style={{ background: copied ? 'rgba(34,197,94,0.12)' : '#C9A84C', color: copied ? '#22c55e' : '#0A0A0A', border: copied ? '1px solid rgba(34,197,94,0.3)' : 'none', borderRadius: 8, padding: '10px 16px', cursor: 'pointer', fontWeight: 700, fontSize: 13, transition: 'all 0.2s', whiteSpace: 'nowrap' }}>
            {copied ? '✓ Copied' : 'Copy link'}
          </button>
        </div>

        {/* Platforms */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {PLATFORMS.map(p => (
            <button key={p.name} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%', background: p.bg, border: '1px solid rgba(255,255,255,0.08)', borderRadius: 10, padding: '12px 16px', cursor: 'pointer', textAlign: 'left' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ color: p.color, fontWeight: 800, fontSize: 14, minWidth: 28 }}>{p.icon}</span>
                <span style={{ color: '#F5F5F0', fontSize: 13 }}>Share on {p.name}</span>
              </div>
              <span style={{ color: 'rgba(255,255,255,0.3)', fontSize: 12 }}><AnimatedCount n={p.count} /> shares</span>
            </button>
          ))}
        </div>

        {/* Total */}
        <div style={{ marginTop: 20, textAlign: 'center', color: 'rgba(255,255,255,0.3)', fontSize: 12 }}>
          {PLATFORMS.reduce((a, p) => a + p.count, 0).toLocaleString()} total shares
        </div>
      </div>
    </div>
  )
}

Component info

About

Social share panel with platform buttons, copy link, share count animation, and QR placeholder