Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 1x 1x 25x 25x 25x 25x 6x 6x 25x 6x 19x | 'use client';
import { ActionIcon, Button } from '@mantine/core';
import { useRouter } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { type FC, useTransition } from 'react';
import { FiLogIn } from 'react-icons/fi';
import { AUTH_ROUTES } from '@/types/routes';
import classes from './AuthButton.module.css';
import type { AuthButtonProps } from './types';
const AuthButton: FC<AuthButtonProps> = ({ variant = 'default' }) => {
const router = useRouter();
const [isPending, startTransition] = useTransition();
const translate = useTranslations('auth');
const handleClick = () => {
startTransition(() => {
router.push(AUTH_ROUTES.LOGIN);
});
};
if (variant === 'compact') {
return (
<>
{/* Icon only on mobile */}
<ActionIcon
variant="gradient"
gradient={{ from: 'pink', to: 'violet', deg: 45 }}
size="lg"
onClick={handleClick}
aria-label={translate('login')}
data-testid="auth-login"
hiddenFrom="sm"
loading={isPending}
>
<FiLogIn size={18} />
</ActionIcon>
{/* Full button on desktop */}
<Button
variant="gradient"
gradient={{ from: 'pink', to: 'violet', deg: 45 }}
size="sm"
leftSection={<FiLogIn size={16} />}
onClick={handleClick}
visibleFrom="sm"
loading={isPending}
className={classes.authButton}
styles={{
root: {
fontWeight: 600,
},
}}
data-testid="auth-login"
>
{translate('login')}
</Button>
</>
);
}
return (
<Button
variant="gradient"
gradient={{ from: 'pink', to: 'violet', deg: 45 }}
size="sm"
leftSection={<FiLogIn size={16} />}
onClick={handleClick}
className={classes.authButton}
styles={{
root: {
fontWeight: 600,
},
}}
data-testid="auth-login"
>
{translate('login')}
</Button>
);
};
export default AuthButton;
|