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