bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add improved production UI 3

Browse Source
This commit is contained in:
Urtzi Alfaro
2025-09-23 19:24:22 +02:00
parent 7f871fc933
commit 7892c5a739
47 changed files with 6211 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/components/ui/Button/Button.tsx
View File

@@ -25,11 +25,12 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
...props
}, ref) => {
const baseClasses = [
'inline-flex items-center justify-center font-medium',
'inline-flex items-center justify-center font-semibold tracking-wide',
'transition-all duration-200 ease-in-out',
'focus:outline-none focus:ring-2 focus:ring-offset-2',
'disabled:opacity-50 disabled:cursor-not-allowed',
'border rounded-lg'
'border rounded-xl shadow-sm',
'hover:shadow-md active:shadow-sm'
];
const variantClasses = {
@@ -78,11 +79,11 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
};
const sizeClasses = {
xs: 'px-2 py-1 text-xs gap-1 min-h-6',
sm: 'px-3 py-1.5 text-sm gap-1.5 min-h-8 sm:min-h-10', // Better touch target on mobile
md: 'px-4 py-2 text-sm gap-2 min-h-10 sm:min-h-12',
lg: 'px-6 py-2.5 text-base gap-2 min-h-12 sm:min-h-14',
xl: 'px-8 py-3 text-lg gap-3 min-h-14 sm:min-h-16'
xs: 'px-3 py-1.5 text-xs gap-1.5 min-h-7',
sm: 'px-4 py-2 text-sm gap-2 min-h-9 sm:min-h-10',
md: 'px-6 py-3 text-sm gap-2.5 min-h-11 sm:min-h-12',
lg: 'px-8 py-3.5 text-base gap-3 min-h-13 sm:min-h-14',
xl: 'px-10 py-4 text-lg gap-3.5 min-h-15 sm:min-h-16'
};
const loadingSpinner = (
@@ -128,13 +129,13 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
>
{isLoading && loadingSpinner}
{!isLoading && leftIcon && (
<span className="flex-shrink-0">{leftIcon}</span>
<span className="flex-shrink-0 w-5 h-5 flex items-center justify-center">{leftIcon}</span>
)}
<span>
<span className="relative">
{isLoading && loadingText ? loadingText : children}
</span>
{!isLoading && rightIcon && (
<span className="flex-shrink-0">{rightIcon}</span>
<span className="flex-shrink-0 w-5 h-5 flex items-center justify-center">{rightIcon}</span>
)}
</button>
);