All files / components Button.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 
 
 
 
 
 
 
4x
4x
 
 
 
 
 
 
4x
 
 
 
 
 
 
import React from 'react';
import { ButtonHTMLAttributes } from 'react';
 
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'danger' | 'outline';
}
 
export function Button({ variant = 'primary', className = '', ...props }: ButtonProps) {
  const baseStyle = 'px-4 py-2 rounded font-semibold transition-colors text-sm';
  const variants = {
    primary: 'bg-[#00deb6] hover:bg-[#00c5a0] text-white',
    secondary: 'bg-[#262637] hover:bg-[#1a1a2b] text-white',
    danger: 'bg-[#e60000] hover:bg-[#cc0000] text-white',
    outline: 'bg-white border-2 border-[#00deb6] text-[#00deb6] hover:bg-[#f7f7f7]'
  };
 
  return (
    <button
      className={`${baseStyle} ${variants[variant]} ${className}`}
      {...props}
    />
  );
}