Cleaner URL bar and some improvements

This commit is contained in:
Gregory Schier
2023-02-22 15:58:04 -08:00
parent 784cb53ec6
commit a4dbfed712
8 changed files with 191 additions and 77 deletions

View File

@@ -5,11 +5,20 @@ import { Icon } from './Icon';
export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
color?: 'primary' | 'secondary';
size?: 'sm' | 'md';
justify?: 'start' | 'center';
forDropdown?: boolean;
};
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
{ className, children, size = 'md', forDropdown, color, ...props }: ButtonProps,
{
className,
justify = 'center',
children,
size = 'md',
forDropdown,
color,
...props
}: ButtonProps,
ref,
) {
return (
@@ -17,12 +26,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
ref={ref}
className={classnames(
className,
'rounded-md text-white flex items-center',
'rounded-md flex items-center',
justify === 'start' && 'justify-start',
justify === 'center' && 'justify-center',
size === 'md' && 'h-10 px-4',
size === 'sm' && 'h-8 px-3',
color === undefined && 'hover:bg-gray-500/[0.1] active:bg-gray-500/[0.15]',
color === 'primary' && 'bg-blue-500 hover:bg-blue-500/90 active:bg-blue-500/80',
color === 'secondary' && 'bg-violet-500 hover:bg-violet-500/90 active:bg-violet-500/80',
size === 'sm' && 'h-8 px-3 text-sm',
color === undefined && 'hover:bg-gray-500/[0.1] active:bg-gray-500/[0.15] text-gray-700',
color === 'primary' && 'bg-blue-500 hover:bg-blue-500/90 active:bg-blue-500/80 text-white',
color === 'secondary' &&
'bg-violet-500 hover:bg-violet-500/90 active:bg-violet-500/80 text-white',
)}
{...props}
>