72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
import { cva, type VariantProps } from 'class-variance-authority'
|
|
import type {
|
|
ButtonHTMLAttributes,
|
|
HTMLAttributes,
|
|
MouseEventHandler,
|
|
ReactNode,
|
|
} from 'react'
|
|
import { twMerge } from 'tailwind-merge'
|
|
|
|
const buttonVariants = cva(
|
|
'inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
|
|
{
|
|
variants: {
|
|
variant: {
|
|
newsPrimary: 'bg-[#2E2F7C] text-white text-lg',
|
|
newsSecondary: 'border-[3px] border-[#2E2F7C] text-[#2E2F7C] text-lg',
|
|
// destructive:
|
|
// 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
|
|
// outline:
|
|
// 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
|
|
// secondary:
|
|
// 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
|
|
// ghost: 'hover:bg-accent hover:text-accent-foreground',
|
|
// link: 'text-primary underline-offset-4 hover:underline',
|
|
},
|
|
size: {
|
|
default: 'h-[50px] w-[150px]',
|
|
block: 'h-[50px] w-full',
|
|
// sm: 'h-8 rounded-md px-3 text-xs',
|
|
// lg: 'h-10 rounded-md px-8',
|
|
// icon: 'h-9 w-9',
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'newsPrimary',
|
|
size: 'default',
|
|
},
|
|
},
|
|
)
|
|
|
|
type TProperties = {
|
|
type?: ButtonHTMLAttributes<HTMLButtonElement>['type']
|
|
onClick?: MouseEventHandler<HTMLButtonElement>
|
|
className?: HTMLAttributes<HTMLButtonElement>['className']
|
|
disabled?: boolean
|
|
children: ReactNode
|
|
variant?: VariantProps<typeof buttonVariants>['variant']
|
|
size?: VariantProps<typeof buttonVariants>['size']
|
|
}
|
|
|
|
export const Button = (properties: TProperties) => {
|
|
const {
|
|
type = 'button',
|
|
onClick,
|
|
className,
|
|
disabled,
|
|
children,
|
|
variant,
|
|
size,
|
|
} = properties
|
|
return (
|
|
<button
|
|
type={type}
|
|
onClick={onClick}
|
|
className={twMerge(buttonVariants({ variant, size, className }))}
|
|
disabled={disabled}
|
|
>
|
|
{children}
|
|
</button>
|
|
)
|
|
}
|