update

frontend/src/components/ui/Button.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { useTheme } from '../../contexts/ThemeContext';
+
+interface ButtonProps {
+  variant?: 'primary' | 'secondary';
+  size?: 'sm' | 'md' | 'lg';
+  children: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  variant = 'primary',
+  size = 'md',
+  children,
+  onClick,
+  disabled = false,
+  className = '',
+}) => {
+  const { theme } = useTheme();
+
+  const baseStyles = `
+    inline-flex items-center justify-center
+    font-semibold rounded-xl cursor-pointer
+    transition-all duration-300 ease
+    disabled:cursor-not-allowed disabled:opacity-50
+  `;
+
+  const sizeStyles = {
+    sm: 'px-3 py-1.5 text-xs',
+    md: 'px-5 py-3 text-sm',
+    lg: 'px-8 py-5 text-base',
+  };
+
+  const variantStyles = {
+    primary: `
+      bg-gradient-to-r from-t-accent to-t-accent-dark
+      text-white hover:shadow-t-accent hover:-translate-y-0.5
+      hover:from-[#f0208a] hover:to-[#d01070]
+    `,
+    secondary: `
+      bg-t-bg-hover border border-t-border
+      text-t-text2 hover:bg-t-bg-elevated
+    `,
+  };
+
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={`${baseStyles} ${sizeStyles[size]} ${variantStyles[variant]} ${className}`}
+      style={{
+        color: variant === 'primary' ? '#fff' : theme.text2,
+      }}
+    >
+      {children}
+    </button>
+  );
+};