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

Try new layout and a bunch of editor fixes

Browse Source
This commit is contained in:
Gregory Schier
2023-03-04 19:06:12 -08:00
parent abc3745be1
commit d952c75e3c
28 changed files with 661 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,14 +8,22 @@ import type {
import { forwardRef } from 'react';
import { Icon } from './Icon';
export interface ButtonProps<T extends ElementType>
extends ButtonHTMLAttributes<HTMLButtonElement> {
color?: 'primary' | 'secondary' | 'warning' | 'danger';
const colorStyles = {
default: 'hover:bg-gray-500/10 text-gray-600',
gray: 'bg-gray-50 text-gray-800 hover:bg-gray-500/10',
primary: 'bg-blue-400',
secondary: 'bg-violet-400',
warning: 'bg-orange-400',
danger: 'bg-red-400',
};
export type ButtonProps<T extends ElementType> = ButtonHTMLAttributes<HTMLButtonElement> & {
color?: keyof typeof colorStyles;
size?: 'xs' | 'sm' | 'md';
justify?: 'start' | 'center';
forDropdown?: boolean;
as?: T;
}
};
export const Button = forwardRef(function Button<T extends ElementType>(
{
@@ -37,18 +45,14 @@ export const Button = forwardRef(function Button<T extends ElementType>(
type="button"
className={classnames(
className,
'rounded-md flex items-center bg-opacity-80 hover:bg-opacity-100 text-white',
'transition-all rounded-md flex items-center bg-opacity-80 hover:bg-opacity-100 hover:text-white',
// 'active:translate-y-[0.5px] active:scale-[0.99]',
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-3 text-sm',
color === undefined && 'hover:bg-gray-500/[0.1]',
color === 'primary' && 'bg-blue-400',
color === 'secondary' && 'bg-violet-400',
color === 'warning' && 'bg-orange-400',
color === 'danger' && 'bg-red-400',
size === 'xs' && 'h-6 px-3 text-xs',
)}
{...props}
>