add declension of words

This commit is contained in:
smanylov
2026-01-08 17:21:09 +07:00
parent 3c0fea3eb0
commit d81ed71e1d
10 changed files with 112 additions and 31 deletions
+33 -6
View File
@@ -8,6 +8,7 @@ import { useClickOutside } from '@/app/hooks/useClickOutside';
import { useQuery } from '@tanstack/react-query';
import { getUserFilesInfo } from '@/app/actions/action';
import { convertBytes } from '@/app/lib/convertBytes';
import { pluralize } from '@/app/lib/pluralize';
type FilesInfo = {
totalSize: number;
@@ -86,7 +87,7 @@ export default function ProtectionOverview() {
useEffect(() => {
setFilesCount([
{
name: 'images',
name: 'images-few',
value: filesInfo?.imageSize ? filesInfo?.imageSize : 0,
color: '#f08c00'
},
@@ -103,6 +104,24 @@ export default function ProtectionOverview() {
])
}, [filesInfo]);
const pluralizeFiles = (number: number) => {
const translate = [t('file'), t('files-few'), t('files')];
return pluralize(number, translate[0], translate[1], translate[2]);
};
const pluralizeCheks = (number: number) => {
const translate = [t('check'), t('checks-few'), t('checks')];
return pluralize(number, translate[0], translate[1], translate[2]);
};
const pluralizeViolations = (number: number) => {
const translate = [t('violation'), t('violations-few'), t('violations')];
return pluralize(number, translate[0], translate[1], translate[2]);
};
const CHECKS = 6;
const VIOLATIONS = 2;
return (
<div className="protection-overview">
<h3>{t('protecting-your-content')}</h3>
@@ -116,13 +135,21 @@ export default function ProtectionOverview() {
<div className="protection-stat-value">
{filesInfo?.totalCount ? filesInfo?.totalCount : 0}
</div>
<div className="protection-stat-label">{t('total-files')}</div>
<div className="protection-stat-label">
{pluralizeFiles(filesInfo?.totalCount || 0)}
</div>
</div>
<div className="protection-stat total-checks">
<div className="protection-stat-value">0</div>
<div className="protection-stat-label">{t('check')}</div>
<div className="protection-stat-value">0</div>
<div className="protection-stat-label">{t('violations')}</div>
<div className="protection-stat-value">
{CHECKS}
</div>
<div className="protection-stat-label">
{pluralizeCheks(CHECKS || 0)}
</div>
<div className="protection-stat-value">{VIOLATIONS}</div>
<div className="protection-stat-label">
{pluralizeViolations(VIOLATIONS)}
</div>
</div>
</>
+27 -7
View File
@@ -5,6 +5,7 @@ import { useQuery } from '@tanstack/react-query';
import { getUserFilesData } from '@/app/actions/fileEntity';
import { getUserFilesInfo } from '@/app/actions/action';
import { convertBytes } from '@/app/lib/convertBytes';
import { pluralize } from '@/app/lib/pluralize';
type FilesInfo = {
totalSize: number;
@@ -69,6 +70,23 @@ export default function ProtectionSummary({ fileType }: { fileType: string }) {
}
});
const pluralizeFilesName = (number: number) => {
const translate = [t(`${fileType}`), t(`${fileType}s-few`), t(`${fileType}s`)];
return pluralize(number, translate[0], translate[1], translate[2]);
};
const pluralizeCheks = (number: number) => {
const translate = [t('check'), t('checks-few'), t('checks')];
return pluralize(number, translate[0], translate[1], translate[2]);
};
const pluralizeViolations = (number: number) => {
const translate = [t('violation'), t('violations-few'), t('violations')];
return pluralize(number, translate[0], translate[1], translate[2]);
};
const CHECKS = 6;
const VIOLATIONS = 2;
return (
<div className="protection-overview grow">
@@ -78,16 +96,18 @@ export default function ProtectionSummary({ fileType }: { fileType: string }) {
<div className="protection-stat total-files">
<div className="protection-stat-value">{filesInfo?.totalCount ? filesInfo?.totalCount : 0}</div>
<div className="protection-stat-label">
{t('total-files')}
<br />
({t(`${fileType}s`)})
{pluralizeFilesName(filesInfo?.totalCount || 0)}
</div>
</div>
<div className="protection-stat total-checks">
<div className="protection-stat-value">0</div>
<div className="protection-stat-label">{t('check')}</div>
<div className="protection-stat-value">0</div>
<div className="protection-stat-label">{t('violations')}</div>
<div className="protection-stat-value">{CHECKS}</div>
<div className="protection-stat-label">
{pluralizeCheks(CHECKS)}
</div>
<div className="protection-stat-value">{VIOLATIONS}</div>
<div className="protection-stat-label">
{pluralizeViolations(VIOLATIONS)}
</div>
</div>
<div className="protection-stat total-usage">
<div className="protection-stat-value">{filesInfo?.totalSize ? convertBytes(filesInfo?.totalSize) : 0} / 0</div>
@@ -5,6 +5,7 @@ import { useQuery } from '@tanstack/react-query';
import { getUserFilesInfo } from '@/app/actions/action';
import { useTranslations } from 'next-intl';
import { convertBytes } from '@/app/lib/convertBytes';
import { pluralize } from '@/app/lib/pluralize';
export default function MyContentInfoBlock() {
const t = useTranslations('Global');
@@ -67,6 +68,11 @@ export default function MyContentInfoBlock() {
return result;
};
const pluralizeFiles = (number: number) => {
const translate = [t('file'), t('files-few'), t('files')];
return pluralize(number, translate[0], translate[1], translate[2]);
};
return (
<div className="block-wrapper auto grow">
<div className="file-stats-container">
@@ -83,7 +89,7 @@ export default function MyContentInfoBlock() {
</div>
<div className="file-stat-details">
<span className="file-stat-count">
{filesInfo.images_quantity ? filesInfo.images_quantity : 0} {t('files')}
{filesInfo.images_quantity || 0} {pluralizeFiles(filesInfo.images_quantity || 0)}
</span>
<span className="file-stat-size">
{filesInfo.images_size ? convertBytes(filesInfo.images_size) : 0}
@@ -103,7 +109,7 @@ export default function MyContentInfoBlock() {
</div>
<div className="file-stat-details">
<span className="file-stat-count">
{filesInfo.videos_quantity ? filesInfo.videos_quantity : 0} {t('files')}
{filesInfo.videos_quantity || 0} {pluralizeFiles(filesInfo.videos_quantity || 0)}
</span>
<span className="file-stat-size">
{filesInfo.videos_size ? convertBytes(filesInfo.videos_size) : 0}
@@ -123,7 +129,7 @@ export default function MyContentInfoBlock() {
</div>
<div className="file-stat-details">
<span className="file-stat-count">
{filesInfo.audios_quantity ? filesInfo.audios_quantity : 0} {t('files')}
{filesInfo.audios_quantity || 0} {pluralizeFiles(filesInfo.audios_quantity || 0)}
</span>
<span className="file-stat-size">
{filesInfo.audios_size ? convertBytes(filesInfo.audios_size) : 0}
@@ -143,7 +149,7 @@ export default function MyContentInfoBlock() {
</div>
<div className="file-stat-details">
<span className="file-stat-count">
{filesInfo.documents_quantity ? filesInfo.documents_quantity : 0} {t('files')}
{filesInfo.documents_quantity || 0} {pluralizeFiles(filesInfo.documents_quantity || 0)}
</span>
<span className="file-stat-size">
{filesInfo.documents_size ? convertBytes(filesInfo.documents_size) : 0}
@@ -81,7 +81,7 @@ export default function MyContentPieChart() {
useEffect(() => {
setFilesCount([
{
name: 'images',
name: 'images-few',
value: filesInfo?.imageSize ? filesInfo?.imageSize : 0,
color: '#f08c00'
},