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 | 1x 1x 1x 1x 1x 1x 1x 1x 16x 16x 16x 5x 5x 5x 5x 2x 2x 2x 2x 5x 3x 3x 5x 16x 1x 1x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x | import { useState } from 'react';
import { toast } from 'sonner';
// Components
import { Button, FullScreenLoader } from '@/components/common';
// Icons
import GoogleIcon from '@shared/icons/GoogleIcon';
// Utils
import { combineClasses } from '@shared/utils';
import './styles.css';
// Providers
import { useFirebase } from '@/providers/firebase';
export const HeroSection = () => {
const { signIn, isLoadingProfile } = useFirebase();
const [isLoading, setIsLoading] = useState(false);
const handleSignInGoogle = async () => {
try {
setIsLoading(true);
await signIn();
} catch (error: unknown) {
toast.error(
'Failed to sign in: ' +
(error instanceof Error ? error.message : 'Unknown error'),
);
} finally {
setIsLoading(false);
}
};
if (isLoadingProfile) {
return <FullScreenLoader />;
}
return (
<Button
aria-label="Sign in with Google"
className={combineClasses(
'hero-button-pop',
'flex-center md:max-w-btn-hero rounded-md bg-secondary text-secondary-foreground hover:bg-secondary-100',
'flex-center gap-2 h-10 px-[18px] whitespace-nowrap rounded-md text-3xs font-semibold transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
'gap-4 py-0 h-auto min-h-btn',
'font-normal leading-md bg-white text-black hover:bg-white',
'disabled:cursor-not-allowed disabled:opacity-90',
'w-full',
)}
isLoading={isLoading}
onClick={handleSignInGoogle}
disabled={isLoading}
>
<GoogleIcon />
<span className="hero-button-text">Sign in with Google</span>
</Button>
);
};
|