AccountInfo AccountInfo.tsx

0% Statements 0/15

0% Branches 0/19

0% Functions 0/3

0% Lines 0/14

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 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108

'use client';
 
import {
  Badge,
  Group,
  Paper,
  SimpleGrid,
  Skeleton,
  Stack,
  Text,
  Title,
} from '@mantine/core';
import { IconInfoCircle } from '@tabler/icons-react';
import { useTranslations } from 'next-intl';
import type { ProfileUser } from '../ProfileClient';
 
interface AccountInfoProps {
  user: ProfileUser | undefined;
  loading: boolean;
}
 
const ROLE_BADGE_COLOR: Record<string, string> = {
  ADMIN: 'red',
  BLOGGER: 'violet',
  USER: 'pink',
};
 
const AccountInfo = ({ user, loading }: AccountInfoProps) => {
  const translate = useTranslations();
  const isLoading = loading && !user;
 
  const formatDate = (dateString: string | undefined) => {
    if (!dateString) return '';
    return new Date(dateString).toLocaleDateString(
      user?.locale?.replace('_', '-') ?? 'en-GB',
      { year: 'numeric', month: 'long', day: 'numeric' },
    );
  };
 
  const getRoleLabel = (role: string) => {
    switch (role) {
      case 'ADMIN':
        return translate('user.roleAdmin');
      case 'BLOGGER':
        return translate('user.roleBlogger');
      default:
        return translate('user.roleUser');
    }
  };
 
  return (
    <Paper shadow="sm" radius="lg" p={{ base: 'md', md: 'xl' }}>
      <Group mb="lg" gap="xs">
        <IconInfoCircle size={20} stroke={1.5} />
        <Title order={4}>{translate('user.accountInfoTitle')}</Title>
      </Group>
 
      <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="md">
        <Stack gap={2}>
          <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
            {translate('user.role')}
          </Text>
          {isLoading ? (
            <Skeleton h={22} w={80} />
          ) : (
            <Badge
              color={ROLE_BADGE_COLOR[user?.role ?? 'USER']}
              variant="light"
              size="md"
              w="fit-content"
            >
              {getRoleLabel(user?.role ?? 'USER')}
            </Badge>
          )}
        </Stack>
 
        <Stack gap={2}>
          <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
            {translate('user.memberSince')}
          </Text>
          {isLoading ? (
            <Skeleton h={20} w={140} />
          ) : (
            <Text size="sm" fw={500}>
              {formatDate(user?.createdAt)}
            </Text>
          )}
        </Stack>
 
        <Stack gap={2}>
          <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
            {translate('user.lastUpdated')}
          </Text>
          {isLoading ? (
            <Skeleton h={20} w={140} />
          ) : (
            <Text size="sm" fw={500}>
              {formatDate(user?.updatedAt)}
            </Text>
          )}
        </Stack>
      </SimpleGrid>
    </Paper>
  );
};
 
export default AccountInfo;