starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-26 19:31:12 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Zoom, better sizes, color picker, sidebar footer

Browse Source
This commit is contained in:
Gregory Schier
2023-03-08 19:22:04 -08:00
parent c37cfaf0e4
commit 6c8f4c943a
26 changed files with 424 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src-web/components/Button.tsx
View File

@@ -1,65 +1,57 @@
import classnames from 'classnames';
import type {
ButtonHTMLAttributes,
ComponentPropsWithoutRef,
ElementType,
ForwardedRef,
} from 'react';
import type { ButtonHTMLAttributes, ForwardedRef } from 'react';
import { forwardRef } from 'react';
import { Icon } from './Icon';
const colorStyles = {
default: 'hover:bg-gray-700/10 text-gray-700 hover:text-gray-1000',
gray: 'text-gray-800 bg-gray-100 hover:bg-gray-500/20 hover:text-gray-1000',
primary: 'bg-blue-400 text-white',
secondary: 'bg-violet-400 text-white',
warning: 'bg-orange-400 text-white',
danger: 'bg-red-400 text-white',
custom: '',
default: 'text-gray-700 enabled:hover:bg-gray-700/10 enabled:hover:text-gray-1000',
gray: 'text-gray-800 bg-gray-100 enabled:hover:bg-gray-500/20 enabled:hover:text-gray-1000',
primary: 'bg-blue-400 text-white hover:bg-blue-500',
secondary: 'bg-violet-400 text-white hover:bg-violet-500',
warning: 'bg-orange-400 text-white hover:bg-orange-500',
danger: 'bg-red-400 text-white hover:bg-red-500',
};
export type ButtonProps<T extends ElementType> = ButtonHTMLAttributes<HTMLButtonElement> & {
export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
color?: keyof typeof colorStyles;
size?: 'xs' | 'sm' | 'md';
size?: 'sm' | 'md';
justify?: 'start' | 'center';
forDropdown?: boolean;
as?: T;
};
export const Button = forwardRef(function Button<T extends ElementType>(
export const Button = forwardRef(function Button(
{
className,
as,
justify = 'center',
children,
size = 'md',
forDropdown,
color,
justify = 'center',
size = 'md',
type = 'button',
...props
}: ButtonProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof ButtonProps<T>>,
}: ButtonProps,
ref: ForwardedRef<HTMLButtonElement>,
) {
const Component = as || 'button';
return (
<Component
<button
ref={ref}
type="button"
type={type}
className={classnames(
className,
'outline-none',
'border border-transparent focus-visible:border-blue-300',
'transition-all rounded-md flex items-center',
'bg-opacity-90 hover:bg-opacity-100',
colorStyles[color || 'default'],
justify === 'start' && 'justify-start',
justify === 'center' && 'justify-center',
size === 'md' && 'h-10 px-4',
size === 'sm' && 'h-8 px-3 text-sm',
size === 'xs' && 'h-7 px-2.5 text-sm',
size === 'md' && 'h-9 px-3',
size === 'sm' && 'h-7 px-2.5 text-sm',
)}
{...props}
>
{children}
{forDropdown && <Icon icon="triangleDown" className="ml-1 -mr-1" />}
</Component>
</button>
);
});