98 lines
2.5 KiB
TypeScript
98 lines
2.5 KiB
TypeScript
'use client'
|
|
|
|
import { useTranslations } from 'next-intl';
|
|
import { IconImageFile, IconVideoFile, IconAudioFile } from '@/app/ui/icons/icons';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { getUserFilesInfo } from '@/app/actions/action';
|
|
import {convertBytes} from '@/app/lib/convertBytes';
|
|
|
|
export default function StatsGrid() {
|
|
const t = useTranslations("Global");
|
|
|
|
const {
|
|
data: filesInfo,
|
|
isLoading,
|
|
isError,
|
|
error,
|
|
} = useQuery({
|
|
queryKey: ['userFilesInfo'],
|
|
queryFn: getUserFilesInfo,
|
|
});
|
|
|
|
return (
|
|
<div className="block-wrapper stats-wrapper">
|
|
<h3>
|
|
{t('your-content')}
|
|
</h3>
|
|
<div className="stats-grid">
|
|
<div className="stats-item left-top-corner stats-header">
|
|
{t('content-type')}
|
|
</div>
|
|
<div className="stats-item stats-header">
|
|
{t('quantity')}
|
|
</div>
|
|
<div className="stats-item stats-header">
|
|
{t('size')}
|
|
</div>
|
|
<div className="stats-item stats-header">
|
|
{t('violations')}
|
|
</div>
|
|
<div className="stats-item last-column right-top-corner stats-header">
|
|
{t('checks')}
|
|
</div>
|
|
|
|
<div className="stats-item first-column second-row images">
|
|
<IconImageFile />
|
|
{t('images')}
|
|
</div>
|
|
<div className="stats-item second-row">
|
|
{filesInfo?.images_quantity ? filesInfo?.images_quantity : 0}
|
|
</div>
|
|
<div className="stats-item second-row">
|
|
{filesInfo?.images_size ? convertBytes(filesInfo?.images_size) : 0}
|
|
</div>
|
|
<div className="stats-item second-row">
|
|
0
|
|
</div>
|
|
<div className="stats-item second-row last-column">
|
|
0
|
|
</div>
|
|
|
|
<div className="stats-item first-column videos">
|
|
<IconVideoFile />
|
|
{t('videos')}
|
|
</div>
|
|
<div className="stats-item">
|
|
{filesInfo?.videos_quantity ? filesInfo?.videos_quantity : 0}
|
|
</div>
|
|
<div className="stats-item">
|
|
{filesInfo?.videos_size ? convertBytes(filesInfo?.videos_size) : 0}
|
|
</div>
|
|
<div className="stats-item">
|
|
0
|
|
</div>
|
|
<div className="stats-item last-column">
|
|
0
|
|
</div>
|
|
|
|
<div className="stats-item last-row left-bottom-corner first-column audio">
|
|
<IconAudioFile />
|
|
{t('audios')}
|
|
</div>
|
|
<div className="stats-item last-row">
|
|
{filesInfo?.audios_quantity ? filesInfo?.audios_quantity : 0}
|
|
</div>
|
|
<div className="stats-item last-row">
|
|
{filesInfo?.audios_size ? convertBytes(filesInfo?.audios_size) : 0}
|
|
</div>
|
|
<div className="stats-item last-row">
|
|
0
|
|
</div>
|
|
<div className="stats-item last-row last-column right-bottom-corner">
|
|
0
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
)
|
|
} |