gitscope
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/features/users/components/used-user-traffic.tsx · v0.3.0-alpha5
Source
1 ab3442f Mrdn 2y ago import { FC } from 'react'
2 ab3442f Mrdn 2y ago import { UserType } from '@marzneshin/features/users';
3 ab3442f Mrdn 2y ago import { CircularProgress } from '@nextui-org/progress';
4 ab3442f Mrdn 2y ago import prettyBytes from '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 ab3442f Mrdn 2y ago return (
17 1820073 Mrdn 2y ago <div className="flex gap-x-5 justify-start items-center">
18 1820073 Mrdn 2y ago <CircularProgress
19 1820073 Mrdn 2y ago value={user.data_limit ? (user.used_traffic / user.data_limit * 100) : 0}
20 1820073 Mrdn 2y ago size='sm'
21 1820073 Mrdn 2y ago showValueLabel
22 1820073 Mrdn 2y ago />
23 1820073 Mrdn 2y ago <div>
24 1820073 Mrdn 2y ago <p className="text-sm font-medium text-gray-900 dark:text-gray-50">
25 1820073 Mrdn 2y ago {prettyBytes(user.used_traffic)}
26 1820073 Mrdn 2y ago </p>
27 1820073 Mrdn 2y ago <p className="text-sm text-gray-500 dark:text-gray-500">
28 1820073 Mrdn 2y ago {user.data_limit ? prettyBytes(user.data_limit) : t('page.users.unlimited')}
29 1820073 Mrdn 2y ago </p>
30 ab3442f Mrdn 2y ago </div>
31 1820073 Mrdn 2y ago </div>
32 ab3442f Mrdn 2y ago );
33 ab3442f Mrdn 2y ago }