Follow Button

'use client'

import { useLayoutEffect, useRef, useState } from 'react'
import './follow-button.css'

export interface FollowButtonProps {
  following?: boolean
  defaultFollowing?: boolean
  count?: number
  onFollowChange?: (on: boolean) => void
  shape?: 'pill' | 'square'
  fill?: 'dark' | 'light'
  className?: string
}

/** Follow / Following / Unfollow with a width morph. */
export function FollowButton({ following, defaultFollowing = false, count, onFollowChange, shape = 'pill', fill = 'dark', className }: FollowButtonProps) {
  const [inner, setInner] = useState(defaultFollowing)
  const on = following ?? inner
  const [hover, setHover] = useState(false)
  const label = !on ? 'Follow' : hover ? 'Unfollow' : 'Following'
  const meas = useRef<HTMLSpanElement>(null)
  const [w, setW] = useState<number>()
  useLayoutEffect(() => { if (meas.current) setW(meas.current.offsetWidth) }, [label])
  const n = count === undefined ? undefined : count + (on && !defaultFollowing ? 1 : !on && defaultFollowing ? -1 : 0)
  return (
    <div className={['sd-fw', className].filter(Boolean).join(' ')} data-fill={fill} data-shape={shape}>
      <button
        type="button"
        className="sd-fw__btn"
        aria-pressed={on}
        style={{ width: w }}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        onFocus={() => setHover(true)}
        onBlur={() => setHover(false)}
        onClick={() => { setInner(!on); setHover(false); onFollowChange?.(!on) }}
      >
        <svg viewBox="0 0 16 16" aria-hidden>{on ? (hover ? <path d="M4 8h8" /> : <path d="m3.5 8.5 3 3 6-7" />) : <path d="M8 3.5v9M3.5 8h9" />}</svg>
        <span key={label} className="sd-fw__lab">{label}</span>
      </button>
      <span ref={meas} className="sd-fw__btn sd-fw__meas" aria-hidden><svg viewBox="0 0 16 16" />{label}</span>
      {n !== undefined && <span className="sd-fw__count"><b key={n}>{n.toLocaleString()}</b> followers</span>}
    </div>
  )
}

.sd-fw { --bg: #1c1c1c; --fg: #f6f6f6; --mute: #8e8e8e; --line: rgb(255 255 255 / 0.1); --soft: rgb(255 255 255 / 0.07); --strong: #fafafa; --on: #111; 
  color: var(--fg); font-size: 14px; line-height: 1.4; -webkit-tap-highlight-color: transparent; }
.sd-fw[data-fill='light'] { --bg: #fff; --fg: #121212; --mute: #6f6f6f; --line: rgb(0 0 0 / 0.09); --soft: rgb(0 0 0 / 0.05); --strong: #111; --on: #fff; }
.sd-fw button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sd-fw :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sd-fw .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sd-fw { display: inline-flex; align-items: center; gap: 12px; }
.sd-fw__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: 14px; background: var(--strong) !important; color: var(--on) !important; transition: width 320ms cubic-bezier(0.3, 1.2, 0.4, 1), background-color 200ms, color 200ms, transform 150ms; overflow: hidden; white-space: nowrap; }
.sd-fw[data-shape='square'] .sd-fw__btn { border-radius: 11px; }
.sd-fw__btn:active { transform: scale(0.95); }
.sd-fw__btn[aria-pressed='true'] { background: transparent !important; color: var(--fg) !important; box-shadow: inset 0 0 0 1px var(--line); }
.sd-fw__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms cubic-bezier(0.3, 1.6, 0.4, 1); }
.sd-fw__btn[aria-pressed='true'] svg { transform: rotate(360deg); }
.sd-fw__lab { display: inline-block; animation: sd-fw-in 220ms ease; }
@keyframes sd-fw-in { from { opacity: 0; transform: translateY(6px); } }
.sd-fw__count { font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
.sd-fw__count b { display: inline-block; color: var(--fg); font-weight: 600; animation: sd-fw-in 240ms ease; }
.sd-fw__meas { position: absolute; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .sd-fw *, .sd-fw *::before, .sd-fw *::after { animation: none !important; transition: none !important; } }