50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
'use client'
|
|
|
|
import { useTranslations } from 'next-intl';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { getUserFilesInfo } from '@/app/actions/action';
|
|
import { convertBytes } from '@/app/lib/convertBytes';
|
|
|
|
export default function MyContentPageTitleColorFrame({ title, description }: { title: string, description: string }) {
|
|
const t = useTranslations('Global');
|
|
const {
|
|
data: filesInfo,
|
|
isLoading,
|
|
isError,
|
|
error,
|
|
} = useQuery({
|
|
queryKey: ['userFilesInfo'],
|
|
queryFn: getUserFilesInfo,
|
|
});
|
|
|
|
return (
|
|
<div className="page-title-color-frame">
|
|
<div className="header-content">
|
|
<div className="header-main">
|
|
<h1>
|
|
{t(title)}
|
|
</h1>
|
|
<p>
|
|
{t(description)}
|
|
</p>
|
|
</div>
|
|
<div className="header-stats">
|
|
<div className="header-stat-item">
|
|
<div className="header-stat-value">{filesInfo?.all_files_quantity}</div>
|
|
<div className="header-stat-label">Файлов</div>
|
|
</div>
|
|
<div className="header-stat-divider"></div>
|
|
<div className="header-stat-item">
|
|
<div className="header-stat-value">0</div>
|
|
<div className="header-stat-label">Защищено</div>
|
|
</div>
|
|
<div className="header-stat-divider"></div>
|
|
<div className="header-stat-item">
|
|
<div className="header-stat-value">{filesInfo.all_files_size ? convertBytes(filesInfo.all_files_size) : 0}</div>
|
|
<div className="header-stat-label">Хранилище</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |