nandi.uk
This repository has no description
2.7 kB
105 lines
1import {
2 Skeleton,
3 Avatar,
4 Group,
5 Alert,
6 Menu,
7 Image,
8 Button,
9} from '@mantine/core';
10import useMyProfile from '../../lib/queries/useMyProfile';
11import CosmikLogo from '@/assets/cosmik-logo-full.svg';
12import { MdBugReport } from 'react-icons/md';
13import { useAuth } from '@/hooks/useAuth';
14import { useRouter } from 'next/navigation';
15import Link from 'next/link';
16import { IoMdLogOut } from 'react-icons/io';
17import { useNavbarContext } from '@/providers/navbar';
18import { BiSolidUserCircle } from 'react-icons/bi';
19import { useColorScheme } from '@mantine/hooks';
20
21export default function ProfileMenu() {
22 const router = useRouter();
23 const colorScheme = useColorScheme();
24 const { toggleMobile } = useNavbarContext();
25 const { data, error, isPending } = useMyProfile();
26 const { logout } = useAuth();
27
28 const handleLogout = async () => {
29 try {
30 await logout();
31 router.push('/');
32 } catch (error) {
33 console.error('Error logging out:', error);
34 }
35 };
36
37 if (isPending || !data) {
38 return <Skeleton w={38} h={38} radius={'md'} ml={4} />;
39 }
40
41 if (error) {
42 return <Alert color="red" title="Could not load profile" />;
43 }
44
45 return (
46 <Group>
47 <Menu shadow="sm" width={280}>
48 <Menu.Target>
49 <Button
50 variant="subtle"
51 color={colorScheme === 'dark' ? 'gray' : 'dark'}
52 fz={'md'}
53 radius={'md'}
54 size="lg"
55 px={3}
56 fullWidth={true}
57 justify="start"
58 leftSection={<Avatar src={data.avatarUrl} />}
59 >
60 {data.name}
61 </Button>
62 </Menu.Target>
63 <Menu.Dropdown>
64 <Menu.Item
65 component={Link}
66 href={`/profile/${data.handle}`}
67 onClick={toggleMobile}
68 leftSection={<BiSolidUserCircle size={22} />}
69 color="gray"
70 >
71 View profile
72 </Menu.Item>
73
74 <Menu.Item
75 component="a"
76 href="https://tangled.org/@cosmik.network/semble/issues"
77 target="_blank"
78 leftSection={<MdBugReport size={22} />}
79 color="gray"
80 >
81 Submit an issue
82 </Menu.Item>
83
84 <Menu.Item
85 color="gray"
86 leftSection={<IoMdLogOut size={22} />}
87 onClick={handleLogout}
88 >
89 Log out
90 </Menu.Item>
91
92 <Menu.Divider />
93
94 <Menu.Item
95 component="a"
96 href="https://cosmik.network/"
97 target="_blank"
98 >
99 <Image src={CosmikLogo.src} alt="Cosmik logo" w={'auto'} h={24} />
100 </Menu.Item>
101 </Menu.Dropdown>
102 </Menu>
103 </Group>
104 );
105}