add declension of words

src/app/ui/dashboard/protection-overview.tsx

@@ -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>
 					</>