frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change modal-window for file-info style

Browse Source
This commit is contained in:
smanylov
2026-03-04 16:15:21 +07:00
parent 617984e587
commit a11abdbb56
4 changed files with 120 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/ui/modal-windows/file-info-modal-window.tsx
+90 -105
View File
@@ -1,141 +1,126 @@
import { convertBytes } from '@/app/lib/convertBytes';
import { formatDate, formatDateTime } from '@/app/lib/formatDate';
import { useTranslations } from 'next-intl';
export function FileInfoModalWindow({ fileInfo, setWindowClose, setWindowChildren }: any) {
const t = useTranslations('Global');
const exampleTest = {
ownerName: 'string',
ownerMail: 'string',
ownerCompany: 'string',
fileName: 'string',
fileSize: 'number',
fileUploadDate: 'number',
fileFormat: 'string',
protectStatus: 'string',
checksCount: 'number'
}
function closeHandler() {
setWindowChildren(null);
setWindowClose(false);
}
console.log(fileInfo);
return (
<div className='file-info-modal-window'>
<div
className="flex justify-between"
>
<h3 className="text-2xl mb-4">
Результат проверки
</h3>
<button
className="file-info-modal-window-close-button"
onClick={closeHandler}
<div className="modal-window-view-file">
<div className="modal-window-view-file-header">
<div
className="modal-window-view-file-title"
>
×
</button>
{fileInfo.fileName ? fileInfo.fileName : '-'}
</div>
</div>
<div
className="file-info-modal-window-section"
className="modal-window-view-file-content"
>
<h4
className="mb-2"
<div
className="file-info-wrapper"
>
Информация о владельце
</h4>
<div className="file-info-modal-window-grid" >
<div className="file-info-modal-window-item">
<div className="file-info-modal-window-title" >
Имя
<div
className="file-info-card"
>
<div className="info-header">
<h4>{t('owner-information')}</h4>
</div>
<div className="file-info-modal-window-content" >
{fileInfo.ownerName ? fileInfo.ownerName : '-'}
<div className="info-item">
<div className="info-label" >
{t('name')}:
</div>
<div className="info-value" >
{fileInfo.ownerName ? fileInfo.ownerName : '-'}
</div>
</div>
<div className="info-item">
<div className="info-label" >
{t('email')}:
</div>
<div className="info-value" >
{fileInfo.ownerEmail ? fileInfo.ownerEmail : '-'}
</div>
</div>
<div className="info-item">
<div className="info-label" >
{t('company')}:
</div>
<div className="info-value" >
{fileInfo.ownerCompany ? fileInfo.ownerCompany : '-'}
</div>
</div>
</div>
<div className="file-info-modal-window-item">
<div className="file-info-modal-window-title" >
Email
<div
className="file-info-card"
>
<div className="info-header">
<h4>{t('file-information')}</h4>
</div>
<div className="file-info-modal-window-content" >
{fileInfo.ownerEmail ? fileInfo.ownerEmail : '-'}
<div className="info-item">
<div className="info-label" >
{t('file-name')}
</div>
<div className="info-value" >
{fileInfo.fileName ? fileInfo.fileName : '-'}
</div>
</div>
</div>
<div className="file-info-modal-window-item">
<div className="file-info-modal-window-title" >
Компания
<div className="info-item">
<div className="info-label" >
{t('size')}
</div>
<div className="info-value" >
{fileInfo.fileSize ? convertBytes(fileInfo.fileSize) : '-'}
</div>
</div>
<div className="file-info-modal-window-content" >
{fileInfo.ownerCompany ? fileInfo.ownerCompany : '-'}
<div className="info-item">
<div className="info-label" >
{t('loaded')}
</div>
<div className="info-value" >
{fileInfo.fileUploadDate ? `${formatDate(fileInfo.fileUploadDate)} ${formatDateTime(fileInfo.fileUploadDate)}` : '-'}
</div>
</div>
<div className="info-item">
<div className="info-label" >
{t('format')}
</div>
<div className="info-value" >
{fileInfo.fileExtension ? fileInfo.fileExtension : '-'}
</div>
</div>
</div>
</div>
<h4
className="mb-2"
<div
className="file-info-card"
>
Информация о файле
</h4>
<div className="file-info-modal-window-grid" >
<div className="file-info-modal-window-item">
<div className="file-info-modal-window-title" >
Имя файла
</div>
<div className="file-info-modal-window-content" >
{fileInfo.fileName ? fileInfo.fileName : '-'}
</div>
<div className="info-header">
<h4>{t('security-details')}</h4>
</div>
<div className="file-info-modal-window-item">
<div className="file-info-modal-window-title" >
Размер
<div className="info-item">
<div className="info-label" >
{t('protection-status')}
</div>
<div className="file-info-modal-window-content" >
{fileInfo.fileSize ? convertBytes(fileInfo.fileSize) : '-'}
</div>
</div>
<div className="file-info-modal-window-item">
<div className="file-info-modal-window-title" >
Загружен
</div>
<div className="file-info-modal-window-content" >
{fileInfo.fileUploadDate ? `${formatDate(fileInfo.fileUploadDate)} ${formatDateTime(fileInfo.fileUploadDate)}` : '-'}
</div>
</div>
<div className="file-info-modal-window-item">
<div className="file-info-modal-window-title" >
Формат
</div>
<div className="file-info-modal-window-content" >
{fileInfo.fileExtension ? fileInfo.fileExtension : '-'}
</div>
</div>
</div>
<h4
className="mb-2"
>
Детали защиты
</h4>
<div className="file-info-modal-window-grid" >
<div className="file-info-modal-window-item">
<div className="file-info-modal-window-title" >
Статус защиты
</div>
<div className="file-info-modal-window-content" >
<div className="info-value" >
{fileInfo.protectStatus ? fileInfo.protectStatus : '-'}
</div>
</div>
<div className="file-info-modal-window-item">
<div className="file-info-modal-window-title" >
Количество проверок
<div className="info-item">
<div className="info-label" >
{t('number-of-checks')}
</div>
<div className="file-info-modal-window-content" >
<div className="info-value" >
{fileInfo.checksCount ? fileInfo.checksCount : '0'}
</div>
</div>
</div>
</div>
</div>
)