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

Started on general window layout

Browse Source
This commit is contained in:
Gregory Schier
2023-02-19 23:11:59 -08:00
parent 0a0839cc3c
commit b95429dbeb
17 changed files with 337 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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