update text layout
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user