96 lines
3.1 KiB
TypeScript
96 lines
3.1 KiB
TypeScript
import type { ReactElement, ButtonHTMLAttributes } from 'react';
|
|
import { cva, type VariantProps } from 'class-variance-authority';
|
|
import { cn } from '@/lib/utils';
|
|
import { useAppSelector } from '@/hooks/redux-hooks';
|
|
|
|
const secondaryButtonVariants = cva(
|
|
'inline-flex items-center justify-center px-3 py-1.5 rounded text-xs font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer',
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default: 'bg-[#23dce1] text-[#112868] hover:bg-[#112868] hover:text-[#23dce1]',
|
|
disabled: 'bg-[#23dce1] text-[#112868] opacity-50',
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'default',
|
|
},
|
|
}
|
|
);
|
|
|
|
interface SecondaryButtonProps
|
|
extends ButtonHTMLAttributes<HTMLButtonElement>,
|
|
VariantProps<typeof secondaryButtonVariants> {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export const SecondaryButton = ({
|
|
children,
|
|
variant,
|
|
className,
|
|
disabled,
|
|
...props
|
|
}: SecondaryButtonProps): ReactElement => {
|
|
const buttonVariant = disabled ? 'disabled' : variant || 'default';
|
|
const { theme } = useAppSelector((state) => state.theme);
|
|
const { roles } = useAppSelector((state) => state.auth);
|
|
|
|
// Check if user is tenant admin (not super_admin) or if we're on a tenant route
|
|
let rolesArray: string[] = [];
|
|
if (Array.isArray(roles)) {
|
|
rolesArray = roles;
|
|
} else if (typeof roles === 'string') {
|
|
try {
|
|
rolesArray = JSON.parse(roles);
|
|
} catch {
|
|
rolesArray = [];
|
|
}
|
|
}
|
|
const isSuperAdmin = rolesArray.includes('super_admin');
|
|
const isTenantAdmin = !isSuperAdmin && rolesArray.length > 0;
|
|
|
|
// Check if we're on a tenant route (for login page where user might not be authenticated)
|
|
const isTenantRoute = typeof window !== 'undefined' && window.location.pathname.startsWith('/tenant');
|
|
|
|
// Use theme colors for tenant admin or tenant routes, default colors for super admin
|
|
const shouldUseTheme = (isTenantAdmin || (isTenantRoute && !isSuperAdmin)) && theme;
|
|
const primaryColor = shouldUseTheme && theme.primary_color ? theme.primary_color : '#112868';
|
|
const secondaryColor = shouldUseTheme && theme.secondary_color ? theme.secondary_color : '#23dce1';
|
|
|
|
return (
|
|
<button
|
|
className={cn(secondaryButtonVariants({ variant: buttonVariant }), className)}
|
|
style={
|
|
buttonVariant === 'default'
|
|
? {
|
|
backgroundColor: secondaryColor,
|
|
color: primaryColor,
|
|
}
|
|
: buttonVariant === 'disabled'
|
|
? {
|
|
backgroundColor: secondaryColor,
|
|
color: primaryColor,
|
|
opacity: 0.5,
|
|
}
|
|
: undefined
|
|
}
|
|
onMouseEnter={(e) => {
|
|
if (buttonVariant === 'default' && !disabled) {
|
|
e.currentTarget.style.backgroundColor = primaryColor;
|
|
e.currentTarget.style.color = secondaryColor;
|
|
}
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
if (buttonVariant === 'default' && !disabled) {
|
|
e.currentTarget.style.backgroundColor = secondaryColor;
|
|
e.currentTarget.style.color = primaryColor;
|
|
}
|
|
}}
|
|
disabled={disabled}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
};
|