araemer/recipe-app
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

Refactoring

Browse source
This commit is contained in:
araemer 2025-10-21 09:08:08 +02:00
parent 34bbaa9df4
commit 9b53f6e676
11 changed files with 501 additions and 515 deletions
Download patch file Download diff file Expand all files Collapse all files

57
frontend/src/components/basics/Button.tsx
View file

@ -1,35 +1,38 @@
import { defaultIconSize } from "./SvgIcon";
import { ButtonType, type BasicButtonProps } from "./BasicButtonDefinitions";
import {defaultIconSize} from "./SvgIcon";
import {type BasicButtonProps, ButtonType} from "./BasicButtonDefinitions";
type ButtonProps = BasicButtonProps & {
onClick: () => void;
type ButtonProps = BasicButtonProps & {
onClick: () => void;
disabled?: boolean;
};
/**
* Button component. Styles are defined in BasicButtonDefinitions.ts
*/
export default function Button({
onClick,
icon: Icon,
text,
buttonType = ButtonType.DefaultButton,
className = "",
...props
}: ButtonProps) {
return (
<button
className={`basic-button bg-primary-button-bg ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
onClick={onClick}
{...props}
>
<div className="flex items-center gap-2">
{Icon && (
<Icon
size={defaultIconSize}
/>
)}
{text}
</div>
</button>
);
onClick,
icon: Icon,
text,
buttonType = ButtonType.DefaultButton,
className = "",
disabled = false,
...props
}: ButtonProps) {
return (
<button
className={`basic-button bg-primary-button-bg ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
onClick={onClick}
disabled={disabled}
{...props}
>
<div className="flex items-center gap-2">
{Icon && (
<Icon
size={defaultIconSize}
/>
)}
{text}
</div>
</button>
);
}