update text layout

2026-01-09 11:08:31 +07:00
parent 46f11e081c
commit da47a7a974
3 changed files with 18 additions and 155 deletions
@@ -3,6 +3,7 @@
 import { useTranslations } from 'next-intl';
 import { useMemo } from 'react';
 import { BarChart, Bar, Cell, XAxis, Tooltip } from 'recharts';
+import { pluralize } from '@/app/lib/pluralize';

 type Files = {
 	data: {
@@ -147,6 +148,16 @@ export const StackedBarChart = ({ data }: Files) => {
 		);
 	};

+	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]);
+	};
+
 	return (
 		<>
 			<div className="stacked-bar-chart-wrapper">
@@ -196,14 +207,16 @@ export const StackedBarChart = ({ data }: Files) => {
 				</div>
 				<div className="protection-stat-total-info">
 					<div
-						className={`font-bold text-[${CHECKS_COLOR}]`}
+						className={`font-bold`}
+						style={{color: CHECKS_COLOR}}
 					>
-						{t('checks')}: {totalChecks}
+						{totalChecks} {pluralizeCheks(totalChecks)}
 					</div>
 					<div
-						className={`font-bold text-[${VIOLATIONS_COLOR}]`}
+						className={`font-bold`}
+						style={{color: VIOLATIONS_COLOR}}
 					>
-						{t('violations')}: {totalViolations}
+						{totalViolations} {pluralizeViolations(totalViolations)}
 					</div>
 				</div>
 			</div>