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 | 1x 1x 6x 6x 5x 6x 9x 6x | 'use client';
import { Avatar, Group, Text } from '@mantine/core';
import { useSession } from 'next-auth/react';
const UserButton = () => {
const { data: session } = useSession();
if (!session) return null;
const userName = session.user?.userName || session.user?.email || '';
const userInitials = userName
.split(' ')
.map((n) => n[0])
.join('')
.toUpperCase()
.slice(0, 2);
return (
<Group wrap="nowrap">
<Avatar color="pink" radius="xl" data-testid="user-initials-avatar">
<span data-testid="user-initials">{userInitials}</span>
</Avatar>
<div style={{ flex: 1, minWidth: 0 }}>
<Text size="sm" fw={500} truncate data-testid="user-name">
{userName}
</Text>
<Text c="dimmed" size="xs" truncate data-testid="user-email">
{session.user?.email}
</Text>
</div>
</Group>
);
};
export default UserButton;
|