Vote Arrows

'use client'

import { useState } from 'react'
import './vote-arrows.css'

type Vote = -1 | 0 | 1
export interface VoteArrowsProps {
  score: number
  vote?: Vote
  defaultVote?: Vote
  onVote?: (v: Vote) => void
  orientation?: 'vertical' | 'horizontal'
  fill?: 'dark' | 'light'
  className?: string
}

const compact = (n: number) => (Math.abs(n) >= 1000 ? `${(n / 1000).toFixed(1).replace(/\.0$/, '')}k` : String(n))

/** Up / down votes with a rolling score. */
export function VoteArrows({ score, vote, defaultVote = 0, onVote, orientation = 'vertical', fill = 'dark', className }: VoteArrowsProps) {
  const [inner, setInner] = useState<Vote>(defaultVote)
  const v = vote ?? inner
  const [d, setD] = useState<'up' | 'down'>('up')
  const total = score + v
  const cast = (n: 1 | -1) => {
    const next: Vote = v === n ? 0 : n
    setD(next > v ? 'up' : 'down'); setInner(next); onVote?.(next)
  }
  const arrow = <svg viewBox="0 0 18 18" aria-hidden><path d="M9 3 3.5 9.5H7v5h4v-5h3.5z" /></svg>
  return (
    <div className={['sd-vt', className].filter(Boolean).join(' ')} data-fill={fill} data-dir={orientation}>
      <button type="button" className="sd-vt__b" data-up="" aria-label="Upvote" aria-pressed={v === 1} onClick={() => cast(1)}>{arrow}</button>
      <div className="sd-vt__n" data-d={d} aria-live="polite" aria-label={`Score ${total}`}><span key={total}>{compact(total)}</span></div>
      <button type="button" className="sd-vt__b" aria-label="Downvote" aria-pressed={v === -1} onClick={() => cast(-1)}>{arrow}</button>
    </div>
  )
}

.sd-vt { --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-vt[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-vt button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sd-vt :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sd-vt .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sd-vt { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.sd-vt[data-dir='horizontal'] { flex-direction: row; border-radius: 999px; }
.sd-vt__b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--mute); transition: color 160ms, background-color 160ms, transform 160ms; }
.sd-vt[data-dir='horizontal'] .sd-vt__b { border-radius: 999px; }
.sd-vt__b:hover { color: var(--fg); background: var(--soft); }
.sd-vt__b:active { transform: scale(0.88); }
.sd-vt__b svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; transition: transform 300ms cubic-bezier(0.3, 1.7, 0.4, 1); }
.sd-vt__b[aria-pressed='true'] { color: var(--fg); }
.sd-vt__b[aria-pressed='true'] svg { fill: currentColor; }
.sd-vt__b[data-up][aria-pressed='true'] svg { transform: translateY(-2px); }
.sd-vt__b:not([data-up])[aria-pressed='true'] svg { transform: translateY(2px) rotate(180deg); }
.sd-vt__b:not([data-up]) svg { transform: rotate(180deg); }
.sd-vt__n { position: relative; height: 22px; min-width: 40px; overflow: hidden; text-align: center; font: 650 14px/22px ui-sans-serif, system-ui; font-variant-numeric: tabular-nums; }
.sd-vt__n span { display: block; animation: sd-vt-up 280ms cubic-bezier(0.2, 1.2, 0.3, 1); }
.sd-vt__n[data-d='down'] span { animation-name: sd-vt-down; }
@keyframes sd-vt-up { from { transform: translateY(100%); opacity: 0; } }
@keyframes sd-vt-down { from { transform: translateY(-100%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sd-vt *, .sd-vt *::before, .sd-vt *::after { animation: none !important; transition: none !important; } }