102 lines
3.0 KiB
TypeScript
102 lines
3.0 KiB
TypeScript
import { Button } from '@chakra-ui/react'
|
|
|
|
interface CustomButtonProps {
|
|
children: React.ReactNode
|
|
onClick?: () => void
|
|
variant?: 'primary' | 'secondary'
|
|
size?: 'sm' | 'md' | 'lg'
|
|
}
|
|
|
|
export const CustomButton = ({
|
|
children,
|
|
onClick,
|
|
variant = 'primary',
|
|
size = 'md'
|
|
}: CustomButtonProps) => {
|
|
// Primary button - Green/Teal with shadow
|
|
const primaryStyles = {
|
|
bg: 'linear-gradient(135deg, #4ade80 0%, #22c55e 100%)',
|
|
color: 'white',
|
|
fontWeight: 'bold',
|
|
fontSize: size === 'sm' ? '14px' : size === 'md' ? '16px' : '18px',
|
|
px: size === 'sm' ? 6 : size === 'md' ? 8 : 10,
|
|
py: size === 'sm' ? 5 : size === 'md' ? 6 : 7,
|
|
rounded: 'full',
|
|
boxShadow: '0 10px 30px rgba(34, 197, 94, 0.4), 0 4px 15px rgba(34, 197, 94, 0.3)',
|
|
_hover: {
|
|
bg: 'linear-gradient(135deg, #22c55e 0%, #16a34a 100%)',
|
|
boxShadow: '0 12px 35px rgba(34, 197, 94, 0.5), 0 6px 20px rgba(34, 197, 94, 0.4)',
|
|
transform: 'translateY(-2px)',
|
|
},
|
|
_active: {
|
|
transform: 'translateY(0)',
|
|
boxShadow: '0 8px 25px rgba(34, 197, 94, 0.3), 0 3px 12px rgba(34, 197, 94, 0.2)',
|
|
},
|
|
transition: 'all 0.3s ease',
|
|
}
|
|
|
|
// Secondary button - Blue with shadow
|
|
const secondaryStyles = {
|
|
bg: 'linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%)',
|
|
color: 'white',
|
|
fontWeight: 'bold',
|
|
fontSize: size === 'sm' ? '14px' : size === 'md' ? '16px' : '18px',
|
|
px: size === 'sm' ? 6 : size === 'md' ? 8 : 10,
|
|
py: size === 'sm' ? 5 : size === 'md' ? 6 : 7,
|
|
rounded: 'full',
|
|
boxShadow: '0 10px 30px rgba(59, 130, 246, 0.4), 0 4px 15px rgba(59, 130, 246, 0.3)',
|
|
_hover: {
|
|
bg: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
|
|
boxShadow: '0 12px 35px rgba(59, 130, 246, 0.5), 0 6px 20px rgba(59, 130, 246, 0.4)',
|
|
transform: 'translateY(-2px)',
|
|
},
|
|
_active: {
|
|
transform: 'translateY(0)',
|
|
boxShadow: '0 8px 25px rgba(59, 130, 246, 0.3), 0 3px 12px rgba(59, 130, 246, 0.2)',
|
|
},
|
|
transition: 'all 0.3s ease',
|
|
}
|
|
|
|
const buttonStyles = variant === 'primary' ? primaryStyles : secondaryStyles
|
|
|
|
return (
|
|
<Button
|
|
onClick={onClick}
|
|
{...buttonStyles}
|
|
>
|
|
{children}
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
// Example usage component
|
|
export const CustomButtonDemo = () => {
|
|
return (
|
|
<div style={{ padding: '40px', display: 'flex', gap: '20px', flexWrap: 'wrap', background: '#f5f5f5' }}>
|
|
{/* Primary buttons */}
|
|
<CustomButton variant="primary" size="sm">
|
|
Small Button
|
|
</CustomButton>
|
|
<CustomButton variant="primary" size="md">
|
|
Medium Button
|
|
</CustomButton>
|
|
<CustomButton variant="primary" size="lg">
|
|
Large Button
|
|
</CustomButton>
|
|
|
|
{/* Secondary buttons */}
|
|
<CustomButton variant="secondary" size="sm">
|
|
Small Button
|
|
</CustomButton>
|
|
<CustomButton variant="secondary" size="md">
|
|
Medium Button
|
|
</CustomButton>
|
|
<CustomButton variant="secondary" size="lg">
|
|
Large Button
|
|
</CustomButton>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CustomButton
|