102 lines
4.5 KiB
TypeScript
102 lines
4.5 KiB
TypeScript
'use client'
|
|
|
|
import { useTranslations } from 'next-intl';
|
|
import {convertBytes} from '@/app/lib/convertBytes';
|
|
import {useUserFilesInfo} from '@/app/hooks/react-query/useUserFilesInfo';
|
|
|
|
export default function DashboardFilesInfo() {
|
|
const t = useTranslations("Global");
|
|
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
|
|
|
|
return (
|
|
<div className="dashboard-files-info">
|
|
<div className="type-card images">
|
|
<div className="stat-type">
|
|
{t('images')}
|
|
</div>
|
|
<div className="stat-value">{filesInfo?.images.quantity ? filesInfo?.images.quantity : 0}</div>
|
|
<div className="stat-label">{t('your-image')}</div>
|
|
<div className="type-card-stats">
|
|
<div className="type-card-stat-row">
|
|
<span className="type-card-stat-label">{t('size')}</span>
|
|
<span className="type-card-stat-value">{filesInfo?.images.size ? convertBytes(filesInfo?.images.size) : 0}</span>
|
|
</div>
|
|
<div className="type-card-stat-row">
|
|
<span className="type-card-stat-label">{t('PROTECTED')}</span>
|
|
<span className="type-card-stat-value">{filesInfo?.images.protected ? filesInfo?.images.protected : 0}</span>
|
|
</div>
|
|
<div className="type-card-stat-row">
|
|
<span className="type-card-stat-label">{t('violations')}</span>
|
|
<span className="type-card-stat-value">{filesInfo?.images.violation ? filesInfo?.images.violation : 0}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="type-card videos">
|
|
<div className="stat-type">
|
|
{t('videos')}
|
|
</div>
|
|
<div className="stat-value">{filesInfo?.videos.quantity ? filesInfo?.videos.quantity : 0}</div>
|
|
<div className="stat-label">{t('your-videos')}</div>
|
|
<div className="type-card-stats">
|
|
<div className="type-card-stat-row">
|
|
<span className="type-card-stat-label">{t('size')}</span>
|
|
<span className="type-card-stat-value">{filesInfo?.videos.size ? convertBytes(filesInfo?.videos.size) : 0}</span>
|
|
</div>
|
|
<div className="type-card-stat-row">
|
|
<span className="type-card-stat-label">{t('PROTECTED')}</span>
|
|
<span className="type-card-stat-value">{filesInfo?.videos.protected ? filesInfo?.videos.protected : 0}</span>
|
|
</div>
|
|
<div className="type-card-stat-row">
|
|
<span className="type-card-stat-label">{t('violations')}</span>
|
|
<span className="type-card-stat-value">{filesInfo?.videos.violation ? filesInfo?.videos.violation : 0}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="type-card audio">
|
|
<div className="stat-type">
|
|
{t('audios')}
|
|
</div>
|
|
<div className="stat-value">{filesInfo?.audios.quantity ? filesInfo?.audios.quantity : 0}</div>
|
|
<div className="stat-label">{t('your-audios')}</div>
|
|
<div className="type-card-stats">
|
|
<div className="type-card-stat-row">
|
|
<span className="type-card-stat-label">{t('size')}</span>
|
|
<span className="type-card-stat-value">{filesInfo?.audios.size ? convertBytes(filesInfo?.audios.size) : 0}</span>
|
|
</div>
|
|
<div className="type-card-stat-row">
|
|
<span className="type-card-stat-label">{t('PROTECTED')}</span>
|
|
<span className="type-card-stat-value">{filesInfo?.audios.protected ? filesInfo?.audios.protected : 0}</span>
|
|
</div>
|
|
<div className="type-card-stat-row">
|
|
<span className="type-card-stat-label">{t('violations')}</span>
|
|
<span className="type-card-stat-value">{filesInfo?.audios.violation ? filesInfo?.audios.violation : 0}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="type-card scripts">
|
|
<div className="stat-type">
|
|
{t('documents')}
|
|
</div>
|
|
<div className="stat-value">{filesInfo?.documents.quantity ? filesInfo?.documents.quantity : 0}</div>
|
|
<div className="stat-label">{t('your-documents')}</div>
|
|
<div className="type-card-stats">
|
|
<div className="type-card-stat-row">
|
|
<span className="type-card-stat-label">{t('size')}</span>
|
|
<span className="type-card-stat-value">{filesInfo?.documents.check? convertBytes(filesInfo?.documents.check) : 0}</span>
|
|
</div>
|
|
<div className="type-card-stat-row">
|
|
<span className="type-card-stat-label">{t('PROTECTED')}</span>
|
|
<span className="type-card-stat-value">{filesInfo?.documents.protected ? filesInfo?.documents.protected : 0}</span>
|
|
</div>
|
|
<div className="type-card-stat-row">
|
|
<span className="type-card-stat-label">{t('violations')}</span>
|
|
<span className="type-card-stat-value">{filesInfo?.documents.violation ? filesInfo?.documents.violation : 0}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |