Hugging Face's logo

Spaces:
GXSNetwork
/
GreenPlusbyGXS
Sleeping

App Files Community
GreenPlusbyGXS
File size: 3,892 Bytes 
759768a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
 
import React from 'react';

const ActionButton = ({ 

  children,

  onClick,

  variant = 'primary',

  size = 'medium',

  icon = null,

  disabled = false,

  loading = false,

  fullWidth = false,

  style = {}

}) => {
  const variants = {
    primary: {
      background: 'linear-gradient(135deg, #2E7D32 0%, #4CAF50 100%)',
      color: 'white',
      border: 'none',
      hoverTransform: 'translateY(-2px)',
      hoverShadow: '0 8px 25px rgba(46, 125, 50, 0.4)'
    },
    secondary: {
      background: 'linear-gradient(135deg, #1976D2 0%, #2196F3 100%)',
      color: 'white',
      border: 'none',
      hoverTransform: 'translateY(-2px)',
      hoverShadow: '0 8px 25px rgba(25, 118, 210, 0.4)'
    },
    warning: {
      background: 'linear-gradient(135deg, #F57C00 0%, #FF9800 100%)',
      color: 'white',
      border: 'none',
      hoverTransform: 'translateY(-2px)',
      hoverShadow: '0 8px 25px rgba(245, 124, 0, 0.4)'
    },
    danger: {
      background: 'linear-gradient(135deg, #D32F2F 0%, #f44336 100%)',
      color: 'white',
      border: 'none',
      hoverTransform: 'translateY(-2px)',
      hoverShadow: '0 8px 25px rgba(211, 47, 47, 0.4)'
    },
    outline: {
      background: 'transparent',
      color: '#2E7D32',
      border: '2px solid #2E7D32',
      hoverTransform: 'translateY(-2px)',
      hoverShadow: '0 8px 25px rgba(46, 125, 50, 0.2)',
      hoverBackground: '#2E7D32',
      hoverColor: 'white'
    }
  };

  const sizes = {
    small: { padding: '8px 16px', fontSize: '0.9rem' },
    medium: { padding: '12px 24px', fontSize: '1rem' },
    large: { padding: '15px 30px', fontSize: '1.1rem' }
  };

  const variantStyle = variants[variant] || variants.primary;
  const sizeStyle = sizes[size] || sizes.medium;

  const buttonStyle = {
    ...sizeStyle,
    ...variantStyle,
    borderRadius: '8px',
    fontWeight: 'bold',
    cursor: disabled || loading ? 'not-allowed' : 'pointer',
    transition: 'all 0.3s ease',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: icon ? '8px' : '0',
    width: fullWidth ? '100%' : 'auto',
    opacity: disabled || loading ? 0.6 : 1,
    position: 'relative',
    overflow: 'hidden',
    ...style
  };

  const handleMouseEnter = (e) => {
    if (disabled || loading) return;
    e.currentTarget.style.transform = variantStyle.hoverTransform;
    e.currentTarget.style.boxShadow = variantStyle.hoverShadow;
    if (variantStyle.hoverBackground) {
      e.currentTarget.style.background = variantStyle.hoverBackground;
      e.currentTarget.style.color = variantStyle.hoverColor;
    }
  };

  const handleMouseLeave = (e) => {
    if (disabled || loading) return;
    e.currentTarget.style.transform = 'translateY(0)';
    e.currentTarget.style.boxShadow = 'none';
    if (variantStyle.hoverBackground) {
      e.currentTarget.style.background = variantStyle.background;
      e.currentTarget.style.color = variantStyle.color;
    }
  };

  return (
    <button

      style={buttonStyle}

      onClick={disabled || loading ? undefined : onClick}

      onMouseEnter={handleMouseEnter}

      onMouseLeave={handleMouseLeave}

      disabled={disabled || loading}

    >

      {loading && (

        <div style={{

          width: '16px',

          height: '16px',

          border: '2px solid transparent',

          borderTop: '2px solid currentColor',

          borderRadius: '50%',

          animation: 'spin 1s linear infinite'

        }} />

      )}

      {!loading && icon && <span>{icon}</span>}

      {!loading && children}

      

      <style jsx>{`

        @keyframes spin {

          0% { transform: rotate(0deg); }

          100% { transform: rotate(360deg); }

        }

      `}</style>

    </button>
  );
};

export default ActionButton;