`src/components/ui/pill-button.tsx`

41 lines
'use client'

import { motion } from 'framer-motion'

interface PillButtonProps {
  label: string
  selected?: boolean
  onClick?: () => void
  disabled?: boolean
}

export function PillButton({
  label,
  selected = false,
  onClick,
  disabled = false,
}: PillButtonProps) {
  return (
    <motion.button
      type="button"
      onClick={onClick}
      disabled={disabled}
      whileTap={{ scale: 0.97 }}
      transition={{ type: 'spring', stiffness: 400, damping: 20 }}
      className={`
        min-h-[56px] rounded-full px-8 py-3 text-base font-medium
        transition-colors focus-visible:outline-2 focus-visible:outline-offset-2
        focus-visible:outline-blue-500 disabled:cursor-not-allowed disabled:opacity-50
        motion-reduce:transform-none
        ${
          selected
            ? 'bg-blue-600 text-white ring-2 ring-blue-400'
            : 'bg-slate-800 text-white hover:bg-slate-700'
        }
      `}
    >
      {label}
    </motion.button>
  )
}