Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 155x 155x 155x 155x 155x 155x 155x 155x 155x 155x 155x 155x 155x 155x 155x 155x 155x 155x 155x | import React from 'react';
import { cva } from 'class-variance-authority';
import { cn } from '@/lib/utils';
const buttonVariants = cva('bg-mono-white w-full border transition select-none', {
variants: {
variant: {
primary: 'bg-mint-500 text-mono-white hover:bg-mint-600 active:bg-mint-700',
secondary:
'border-mint-500 text-mint-500 active:text-mint-700 active:border-mint-600 hover:bg-gray-50 active:bg-gray-100',
tertiary: ' border-gray-400 text-gray-600 hover:bg-gray-50 active:bg-gray-100',
},
size: {
md: 'h-13 rounded-2xl text-text-md-bold',
sm: 'h-10 rounded-xl text-text-sm-semibold',
},
disabled: {
true: '!cursor-not-allowed',
false: '',
},
},
compoundVariants: [
{
variant: 'primary',
disabled: true,
class: 'bg-gray-400 hover:bg-gray-400 active:bg-gray-400',
},
{
variant: 'secondary',
disabled: true,
class:
'hover:bg-mono-white active:bg-mono-white border-gray-400 text-gray-400 active:border-gray-400 active:text-gray-400',
},
{
variant: 'tertiary',
disabled: true,
class: 'hover:bg-mono-white active:bg-mono-white text-gray-400',
},
],
defaultVariants: {
variant: 'primary',
size: 'md',
disabled: false,
},
});
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: 'primary' | 'secondary' | 'tertiary';
size?: 'md' | 'sm';
type?: 'button' | 'submit' | 'reset';
}
export const Button = ({
className,
variant,
size,
disabled = false,
children,
type = 'button',
...props
}: ButtonProps) => {
return (
<button
className={cn(buttonVariants({ variant, size, disabled: !!disabled }), className)}
disabled={disabled}
type={type}
{...props}
>
{children}
</button>
);
};
|