70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
/**
|
|
* Modern Button Component
|
|
* Professional Resume Builder - Enhanced with resume-example.com design patterns
|
|
*
|
|
* @author David Valera Melendez <david@valera-melendez.de>
|
|
* @created 2025-08-07
|
|
* @location Made in Germany 🇩🇪
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import React from 'react';
|
|
|
|
export interface ModernButtonProps {
|
|
children: React.ReactNode;
|
|
onClick?: () => void;
|
|
variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
|
|
size?: 'sm' | 'md' | 'lg';
|
|
disabled?: boolean;
|
|
loading?: boolean;
|
|
className?: string;
|
|
type?: 'button' | 'submit' | 'reset';
|
|
}
|
|
|
|
export const ModernButton: React.FC<ModernButtonProps> = ({
|
|
children,
|
|
onClick,
|
|
variant = 'primary',
|
|
size = 'md',
|
|
disabled = false,
|
|
loading = false,
|
|
className = '',
|
|
type = 'button',
|
|
}) => {
|
|
const baseClasses =
|
|
'inline-flex items-center justify-center font-semibold transition-all duration-200 ease-out focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed relative overflow-hidden';
|
|
|
|
const variantClasses = {
|
|
primary:
|
|
'bg-gradient-to-r from-primary-500 to-primary-600 text-white hover:from-primary-600 hover:to-primary-700 focus:ring-primary-500 shadow-medium hover:shadow-large active:shadow-soft',
|
|
secondary:
|
|
'bg-grayscale-100 text-text-primary hover:bg-grayscale-200 focus:ring-grayscale-500 border border-border-primary shadow-soft hover:shadow-medium',
|
|
outline:
|
|
'border-2 border-primary-500 text-primary-600 hover:bg-primary-50 focus:ring-primary-500 shadow-soft hover:shadow-medium',
|
|
ghost: 'text-primary-600 hover:bg-primary-50 focus:ring-primary-500',
|
|
};
|
|
|
|
const sizeClasses = {
|
|
sm: 'px-3 py-1.5 text-sm rounded-lg',
|
|
md: 'px-4 py-2.5 text-sm rounded-xl',
|
|
lg: 'px-6 py-3 text-base rounded-xl',
|
|
};
|
|
|
|
return (
|
|
<button
|
|
type={type}
|
|
onClick={onClick}
|
|
disabled={disabled || loading}
|
|
className={` ${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className} `}
|
|
>
|
|
{loading && (
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<div className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
|
|
</div>
|
|
)}
|
|
<span className={loading ? 'opacity-0' : 'opacity-100'}>{children}</span>
|
|
</button>
|
|
);
|
|
};
|