update text layout

This commit is contained in:
smanylov
2026-01-09 11:08:31 +07:00
parent 46f11e081c
commit da47a7a974
3 changed files with 18 additions and 155 deletions
+17 -4
View File
@@ -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>
@@ -1,150 +0,0 @@
/* removed */
import { IconShield, IconDownload } from '@/app/ui/icons/icons';
export default function ProtectedFilesTable() {
return (
<div className="protected-files-table">
<h3>
Защищенные изображения (0)
</h3>
<table>
<thead>
<tr>
<th>ФАЙЛ</th>
<th>РАЗМЕР</th>
<th>ЗАЩИТА</th>
<th>ДАТА</th>
<th>ДЕЙСТВИЯ</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div className="files-table-file">
<div className="files-table-icon">
<IconShield />
</div>
<div>
<div className="files-table-title">
Screenshot 2025-11-13 at 10.20.14.p...
</div>
<div className="files-table-protect">
ПОЛНАЯ ЗАЩИТА
<span className="real-protection-badge">
ВСЕ МОДУЛИ
</span>
</div>
</div>
</div>
</td>
<td className="files-table-size">
1.93 МБ
</td>
<td>
<div className="files-table-protect">
<div className="files-table-bar">
<div className="files-table-fill"></div>
</div>
<span>
100%
</span>
</div>
</td>
<td className="files-table-date">
27.11.2025 10:16
</td>
<td>
<button className="btn btn-secondary">
<IconDownload /> Скачать
</button>
</td>
</tr>
<tr>
<td>
<div className="files-table-file">
<div className="files-table-icon">
<IconShield />
</div>
<div>
<div className="files-table-title">
Screenshot 2025-11-13 at 10.20.14.p...
</div>
<div className="files-table-protect">
ПОЛНАЯ ЗАЩИТА
<span className="real-protection-badge">
ВСЕ МОДУЛИ
</span>
</div>
</div>
</div>
</td>
<td className="files-table-size">
1.93 МБ
</td>
<td>
<div className="files-table-protect">
<div className="files-table-bar">
<div className="files-table-fill"></div>
</div>
<span>
100%
</span>
</div>
</td>
<td className="files-table-date">
27.11.2025 10:16
</td>
<td>
<button className="btn btn-secondary">
<IconDownload /> Скачать
</button>
</td>
</tr>
<tr>
<td>
<div className="files-table-file">
<div className="files-table-icon">
<IconShield />
</div>
<div>
<div className="files-table-title">
Screenshot 2025-11-13 at 10.20.14.p...
</div>
<div className="files-table-protect">
ПОЛНАЯ ЗАЩИТА
<span className="real-protection-badge">
ВСЕ МОДУЛИ
</span>
</div>
</div>
</div>
</td>
<td className="files-table-size">
1.93 МБ
</td>
<td>
<div className="files-table-protect">
<div className="files-table-bar">
<div className="files-table-fill"></div>
</div>
<span>
100%
</span>
</div>
</td>
<td className="files-table-date">
27.11.2025 10:16
</td>
<td>
<button className="btn btn-secondary">
<IconDownload /> Скачать
</button>
</td>
</tr>
</tbody>
</table>
</div>
)
}
@@ -83,7 +83,7 @@ export default function MyContentInfoBlock() {
<IconImageFile />
</div>
<div className="file-stat-info">
<h4 className="file-stat-title">{t('images')}</h4>
<h4 className="file-stat-title">{t('images-few')}</h4>
<span className="file-stat-usage">{fileTypeSizePercents().images}%</span>
</div>
</div>