gitscope
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/modules/users/components/used-user-traffic.tsx · v0.7.1
Source
1 ab3442f Mrdn 2y ago import { FC } from 'react'
2 e6e6467 Dawsh 2y ago import { UserType } from '@marzneshin/modules/users';
3 ab3442f Mrdn 2y ago import { CircularProgress } from '@nextui-org/progress';
4 1974f76 Mrdn 2y ago import { format } from '@chbphone55/pretty-bytes';
5 1820073 Mrdn 2y ago import { useTranslation } from 'react-i18next';
6 ab3442f Mrdn 2y ago
7 ab3442f Mrdn 2y ago
8 ab3442f Mrdn 2y ago interface UserUsedTrafficProps {
9 ab3442f Mrdn 2y ago user: UserType
10 ab3442f Mrdn 2y ago }
11 ab3442f Mrdn 2y ago
12 ab3442f Mrdn 2y ago export const UserUsedTraffic: FC<UserUsedTrafficProps> = (
13 ab3442f Mrdn 2y ago { user }
14 ab3442f Mrdn 2y ago ) => {
15 1820073 Mrdn 2y ago const { t } = useTranslation()
16 5c4b99e Mardin 2y ago const formattedUsedTraffic = format(user.used_traffic)
17 5c4b99e Mardin 2y ago const formattedDatalimit = (user.data_limit != null) ? format(user.data_limit) : []
18 ab3442f Mrdn 2y ago return (
19 1820073 Mrdn 2y ago <div className="flex gap-x-5 justify-start items-center">
20 1820073 Mrdn 2y ago <CircularProgress
21 1820073 Mrdn 2y ago value={user.data_limit ? (user.used_traffic / user.data_limit * 100) : 0}
22 1820073 Mrdn 2y ago size='sm'
23 1820073 Mrdn 2y ago showValueLabel
24 1820073 Mrdn 2y ago />
25 1820073 Mrdn 2y ago <div>
26 1820073 Mrdn 2y ago <p className="text-sm font-medium text-gray-900 dark:text-gray-50">
27 5c4b99e Mardin 2y ago {formattedUsedTraffic[0]} {formattedUsedTraffic[1]}
28 1820073 Mrdn 2y ago </p>
29 1820073 Mrdn 2y ago <p className="text-sm text-gray-500 dark:text-gray-500">
30 5c4b99e Mardin 2y ago {user.data_limit ? `${formattedDatalimit[0]} ${formattedDatalimit[1]}` : t('page.users.unlimited')}
31 1820073 Mrdn 2y ago </p>
32 ab3442f Mrdn 2y ago </div>
33 1820073 Mrdn 2y ago </div>
34 ab3442f Mrdn 2y ago );
35 ab3442f Mrdn 2y ago }