114 lines
3.8 KiB
TypeScript
114 lines
3.8 KiB
TypeScript
import React from 'react';
|
|
import { TransitionLink } from '@/components/ui/TransitionLink';
|
|
import { AnimatedGlossyBorder } from '@/components/ui/AnimatedGlossyBorder';
|
|
import { cn } from './utils';
|
|
|
|
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?:
|
|
| 'primary'
|
|
| 'secondary'
|
|
| 'accent'
|
|
| 'saturated'
|
|
| 'outline'
|
|
| 'ghost'
|
|
| 'white'
|
|
| 'destructive';
|
|
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
href?: string;
|
|
className?: string;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
export const buttonBaseStyles =
|
|
'cursor-pointer inline-flex items-center justify-center whitespace-nowrap rounded-full font-semibold transition-all duration-500 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-95 hover:-translate-y-1 hover:scale-[1.02] relative overflow-hidden group/btn isolate select-none';
|
|
|
|
export const buttonVariantsMap = {
|
|
primary: 'bg-primary text-white shadow-md hover:shadow-primary/30 hover:shadow-2xl',
|
|
secondary: 'bg-secondary text-white shadow-md hover:shadow-secondary/30 hover:shadow-2xl',
|
|
accent: 'bg-accent text-primary-dark shadow-md hover:shadow-accent/30 hover:shadow-2xl',
|
|
saturated: 'bg-saturated text-white shadow-md hover:shadow-primary/30 hover:shadow-2xl',
|
|
outline:
|
|
'border-2 border-primary bg-transparent text-primary hover:bg-primary/5 hover:shadow-primary/20 hover:shadow-xl',
|
|
ghost: 'text-primary hover:bg-primary/5 hover:shadow-lg',
|
|
white:
|
|
'bg-white text-primary shadow-md hover:shadow-primary/30 hover:shadow-2xl',
|
|
destructive:
|
|
'bg-destructive text-destructive-foreground shadow-md hover:shadow-destructive/30 hover:shadow-2xl',
|
|
};
|
|
|
|
export const buttonSizesMap = {
|
|
sm: 'h-9 px-4 text-sm md:text-base',
|
|
md: 'h-11 px-6 text-base md:text-lg',
|
|
lg: 'h-14 px-5 md:px-8 text-base md:text-lg',
|
|
xl: 'h-16 px-6 md:px-10 text-lg md:text-xl',
|
|
};
|
|
|
|
export const buttonShineColorsMap = {
|
|
primary: 'via-white/30',
|
|
secondary: 'via-white/30',
|
|
accent: 'via-white/40',
|
|
saturated: 'via-white/30',
|
|
outline: 'via-primary/20',
|
|
ghost: 'via-primary/10',
|
|
white: 'via-primary/20',
|
|
destructive: 'via-white/30',
|
|
};
|
|
|
|
export function getButtonClasses(variant: keyof typeof buttonVariantsMap = 'primary', size: keyof typeof buttonSizesMap = 'md', className?: string) {
|
|
return cn(buttonBaseStyles, buttonVariantsMap[variant], buttonSizesMap[size], className);
|
|
}
|
|
|
|
export function ButtonOverlay({ variant = 'primary' }: { variant?: keyof typeof buttonVariantsMap }) {
|
|
const isWhiteBg = variant === 'white' || variant === 'outline' || variant === 'ghost';
|
|
|
|
return (
|
|
<>
|
|
<span
|
|
className={cn(
|
|
'absolute top-0 -left-[150%] h-[200%] w-[150%] bg-gradient-to-r from-transparent to-transparent skew-x-[-20deg] group-hover/btn:left-[100%] transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] z-30 pointer-events-none',
|
|
buttonShineColorsMap[variant]
|
|
)}
|
|
/>
|
|
{!isWhiteBg && (
|
|
<AnimatedGlossyBorder
|
|
color="white"
|
|
className="opacity-40 group-hover/btn:opacity-100 transition-opacity duration-700"
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function Button({
|
|
className,
|
|
variant = 'primary',
|
|
size = 'md',
|
|
href,
|
|
...props
|
|
}: ButtonProps) {
|
|
const styles = getButtonClasses(variant, size, className);
|
|
|
|
const content = (
|
|
<>
|
|
<span className="relative z-10 flex items-center justify-center gap-2">
|
|
{props.children}
|
|
</span>
|
|
<ButtonOverlay variant={variant} />
|
|
</>
|
|
);
|
|
|
|
if (href) {
|
|
return (
|
|
<TransitionLink href={href} className={styles}>
|
|
{content}
|
|
</TransitionLink>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button className={styles} {...props}>
|
|
{content}
|
|
</button>
|
|
);
|
|
}
|