1import { FC } from 'react'
 2import { UserType } from '@marzneshin/features/users';
 3import { CircularProgress } from '@nextui-org/progress';
 4import prettyBytes from 'pretty-bytes';
 5import { useTranslation } from 'react-i18next';
 6
 7
 8interface UserUsedTrafficProps {
 9    user: UserType
10}
11
12export const UserUsedTraffic: FC<UserUsedTrafficProps> = (
13    { user }
14) => {
15    const { t } = useTranslation()
16    return (
17        <div className="flex gap-x-5 justify-start items-center">
18            <CircularProgress
19                value={user.data_limit ? (user.used_traffic / user.data_limit * 100) : 0}
20                size='sm'
21                showValueLabel
22            />
23            <div>
24                <p className="text-sm font-medium text-gray-900 dark:text-gray-50">
25                    {prettyBytes(user.used_traffic)}
26                </p>
27                <p className="text-sm text-gray-500 dark:text-gray-500">
28                    {user.data_limit ? prettyBytes(user.data_limit) : t('page.users.unlimited')}
29                </p>
30            </div>
31        </div>
32    );
33}