web-app/src/components/ui/Button.tsx - master - foult080/hackaton-app

web-app/src/components/ui/Button.tsx
48 строк2 KB
Foult080
feat(): start new landing
07 июл 2026, 10:34
07 июл 2026, 10:34034ac0f
import type { ButtonHTMLAttributes } from 'react'
import { Loader2 } from 'lucide-react'

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'danger' | 'glass' | 'glass-primary' | 'outline'
  loading?: boolean
  icon?: React.ReactNode
  size?: 'sm' | 'md' | 'lg'
}

const base = 'inline-flex items-center justify-center gap-2 font-medium rounded-xl transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed'

const variants = {
  primary: 'bg-gradient-to-r from-primary-500 to-primary-600 text-white shadow-glass hover:from-primary-600 hover:to-primary-700 focus:ring-primary-500',
  secondary: 'bg-white text-gray-700 border border-gray-200 shadow-sm hover:bg-gray-50 hover:border-gray-300 focus:ring-primary-500',
  danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
  glass: 'bg-glass border border-glass text-white backdrop-blur-md hover:bg-glass-strong hover:border-glass-strong focus:ring-white/30',
  'glass-primary': 'bg-gradient-to-r from-primary-500/80 to-primary-600/80 text-white backdrop-blur-md shadow-glass hover:from-primary-500 hover:to-primary-600 focus:ring-primary-500/50',
  outline: 'bg-transparent border-2 border-primary-500 text-primary-600 hover:bg-primary-500/10 focus:ring-primary-500',
}

const sizes = {
  sm: 'px-3 py-1.5 text-sm',
  md: 'px-5 py-2.5 text-sm',
  lg: 'px-7 py-3.5 text-base',
}

export default function Button({
  variant = 'primary',
  loading = false,
  icon,
  children,
  disabled,
  className = '',
  size = 'md',
  ...props
}: ButtonProps & { size?: 'sm' | 'md' | 'lg' }) {
  return (
    <button
      className={`${base} ${variants[variant]} ${sizes[size]} ${className}`}
      disabled={disabled || loading}
      {...props}
    >
      {loading ? <Loader2 size={16} className="animate-spin" /> : icon}
      {children}
    </button>
  )
}