50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
import React from 'react'
|
|
import { ButtonProps } from '@/types'
|
|
|
|
const Button = ({
|
|
onClick,
|
|
className,
|
|
text,
|
|
type,
|
|
leftIcon,
|
|
midIcon,
|
|
rightIcon,
|
|
size = 'lg',
|
|
}: ButtonProps) => {
|
|
const sizeClasses = {
|
|
sm: 'h-10 text-sm px-4',
|
|
md: 'h-12 text-base px-6',
|
|
lg: 'h-14 text-lg px-8',
|
|
}
|
|
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
className={`
|
|
cursor-pointer
|
|
rounded-2xl
|
|
transition-all
|
|
duration-300
|
|
font-medium
|
|
shadow-lg
|
|
hover:shadow-2xl
|
|
hover:scale-105
|
|
active:scale-95
|
|
backdrop-blur-sm
|
|
${sizeClasses[size]}
|
|
${className}
|
|
`}
|
|
type={type}
|
|
>
|
|
<div className="flex items-center justify-center gap-2">
|
|
{leftIcon && <span className="flex items-center">{leftIcon}</span>}
|
|
{midIcon && <span className="flex items-center">{midIcon}</span>}
|
|
<span className="text-center">{text}</span>
|
|
{rightIcon && <span className="flex items-center">{rightIcon}</span>}
|
|
</div>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export default Button
|