This repository has no description
1'use client';
2
3import SignUpForm from '@/features/auth/components/signUpForm/SignUpForm';
4import { Stack, Title, Text, Anchor, Image, Loader } from '@mantine/core';
5import SembleLogo from '@/assets/semble-logo.svg';
6import { useAuth } from '@/hooks/useAuth';
7import { useEffect, useState } from 'react';
8import { useRouter } from 'next/navigation';
9
10export default function Page() {
11 const { isAuthenticated, isLoading } = useAuth();
12 const [isRedirecting, setIsRedirecting] = useState(false);
13 const router = useRouter();
14
15 useEffect(() => {
16 if (isAuthenticated) {
17 setIsRedirecting(true);
18
19 // redirect after 1 second
20 const id = setTimeout(() => {
21 router.push('/library');
22 }, 1000);
23 }
24 }, [isAuthenticated, router]);
25
26 if (isLoading) {
27 return (
28 <Stack align="center">
29 <Loader type="dots" />
30 </Stack>
31 );
32 }
33
34 if (isRedirecting) {
35 return (
36 <Stack align="center">
37 <Text fw={500} fz={'xl'}>
38 Already logged in, redirecting you to library
39 </Text>
40 <Loader type="dots" />
41 </Stack>
42 );
43 }
44
45 return (
46 <Stack align="center" gap="xl" maw={450}>
47 <Stack gap={0}>
48 <Stack gap={'xs'}>
49 <Image
50 src={SembleLogo.src}
51 alt="Semble logo"
52 w={48}
53 h={64.5}
54 mx={'auto'}
55 />
56 <Title order={1} ta="center">
57 Welcome
58 </Title>
59 </Stack>
60 <Text fz={'h3'} fw={700} ta={'center'} c={'stone'}>
61 Sign up to get started
62 </Text>
63 </Stack>
64
65 <Text fw={500} ta="center" maw={380}>
66 When you sign up today, you’ll create a Bluesky account. In near future,
67 your account will be seamlessly migrated to our{' '}
68 <Anchor
69 href="https://cosmik.network"
70 target="_blank"
71 fw={500}
72 c={'blue'}
73 >
74 Cosmik Network
75 </Anchor>
76 .
77 </Text>
78 <SignUpForm />
79 </Stack>
80 );
81}