`app/petitions/[slug]/ShareButtons.tsx`

144 lines
'use client';

interface ShareButtonsProps {
  url: string;
  title: string;
  summary: string;
}

export default function ShareButtons({ url, title, summary }: ShareButtonsProps) {
  const encodedUrl = encodeURIComponent(url);
  const encodedTitle = encodeURIComponent(title);
  const encodedSummary = encodeURIComponent(summary || title);

  const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(`${title} - Sign the petition!`)}&url=${encodedUrl}`;
  const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`;
  const emailUrl = `mailto:?subject=${encodedTitle}&body=${encodeURIComponent(`I just signed this petition and thought you might want to as well:\n\n${title}\n\n${summary ? summary + '\n\n' : ''}Sign here: ${url}`)}`;

  const buttonBase: React.CSSProperties = {
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: '0.5rem',
    padding: '0.625rem 1rem',
    borderRadius: 'var(--radius-md)',
    fontSize: '0.875rem',
    fontWeight: 600,
    textDecoration: 'none',
    border: '1px solid var(--color-border)',
    cursor: 'pointer',
    transition: 'all 150ms ease',
    flex: '1 1 0',
    minWidth: '0',
    textAlign: 'center',
  };

  return (
    <div style={{
      backgroundColor: 'var(--color-surface)',
      border: '1px solid var(--color-border)',
      borderRadius: 'var(--radius-lg)',
      padding: '1.5rem',
    }}>
      <h3 style={{
        color: 'var(--color-text)',
        fontSize: '1rem',
        fontWeight: 700,
        marginBottom: '1rem',
      }}>
        Share This Petition
      </h3>

      <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
        {/* Twitter/X */}
        <a
          href={twitterUrl}
          target="_blank"
          rel="noopener noreferrer"
          style={{
            ...buttonBase,
            backgroundColor: 'rgba(29, 155, 240, 0.12)',
            color: '#1d9bf0',
            borderColor: 'rgba(29, 155, 240, 0.3)',
          }}
          onMouseOver={(e) => { (e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(29, 155, 240, 0.2)'; }}
          onMouseOut={(e) => { (e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(29, 155, 240, 0.12)'; }}
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
          </svg>
          <span>Post</span>
        </a>

        {/* Facebook */}
        <a
          href={facebookUrl}
          target="_blank"
          rel="noopener noreferrer"
          style={{
            ...buttonBase,
            backgroundColor: 'rgba(66, 103, 178, 0.12)',
            color: '#4267B2',
            borderColor: 'rgba(66, 103, 178, 0.3)',
          }}
          onMouseOver={(e) => { (e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(66, 103, 178, 0.2)'; }}
          onMouseOut={(e) => { (e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(66, 103, 178, 0.12)'; }}
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
          </svg>
          <span>Share</span>
        </a>

        {/* Email */}
        <a
          href={emailUrl}
          style={{
            ...buttonBase,
            backgroundColor: 'rgba(124, 58, 237, 0.12)',
            color: 'var(--color-secondary)',
            borderColor: 'rgba(124, 58, 237, 0.3)',
          }}
          onMouseOver={(e) => { (e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(124, 58, 237, 0.2)'; }}
          onMouseOut={(e) => { (e.currentTarget as HTMLElement).style.backgroundColor = 'rgba(124, 58, 237, 0.12)'; }}
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <rect x="2" y="4" width="20" height="16" rx="2"/>
            <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>
          </svg>
          <span>Email</span>
        </a>
      </div>

      {/* Copy link */}
      <button
        onClick={() => {
          navigator.clipboard.writeText(url).then(() => {
            const btn = document.getElementById('copy-link-btn');
            if (btn) {
              btn.textContent = 'Link copied!';
              setTimeout(() => { btn.textContent = 'Copy link to clipboard'; }, 2000);
            }
          });
        }}
        id="copy-link-btn"
        style={{
          display: 'block',
          width: '100%',
          marginTop: '0.75rem',
          padding: '0.5rem',
          backgroundColor: 'transparent',
          border: '1px dashed var(--color-border)',
          borderRadius: 'var(--radius-md)',
          color: 'var(--color-text-muted)',
          fontSize: '0.8125rem',
          cursor: 'pointer',
          transition: 'all 150ms ease',
        }}
      >
        Copy link to clipboard
      </button>
    </div>
  );
}