Files
no-copy-frontend/src/app/ui/modal-windows/file-info-modal-window.tsx
T
2026-03-26 11:56:36 +07:00

128 lines
3.4 KiB
TypeScript

import { convertBytes } from '@/app/lib/convertBytes';
import { formatDate, formatDateTime } from '@/app/lib/formatDate';
import { useTranslations } from 'next-intl';
import { FileDetails } from '@/app/[locale]/pages/file/[id]/page';
export function FileInfoModalWindow({ fileInfo, setWindowClose, setWindowChildren }: {
fileInfo: FileDetails,
setWindowClose: any,
setWindowChildren: any
}) {
const t = useTranslations('Global');
return (
<div className="modal-window-view-file">
<div
className="modal-window-view-file-content"
>
<div
className="file-info-wrapper"
>
<div
className="file-info-card"
>
<div className="info-header">
<h4>{t('owner-information')}</h4>
</div>
<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-card"
>
<div className="info-header">
<h4>{t('file-information')}</h4>
</div>
<div className="info-item">
<div className="info-label" >
{t('file-name')}
</div>
<div className="info-value" >
{fileInfo.fileName ? fileInfo.fileName : '-'}
</div>
</div>
<div className="info-item">
<div className="info-label" >
{t('size')}
</div>
<div className="info-value" >
{fileInfo.fileSize ? convertBytes(fileInfo.fileSize) : '-'}
</div>
</div>
<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>
{fileInfo.mimeType === 'image' && (
<div className="info-item image">
<img src={fileInfo.thumbnailFileUrl ? fileInfo.thumbnailFileUrl : '#'} alt="" />
</div>
)}
</div>
</div>
<div
className="file-info-card"
>
<div className="info-header">
<h4>{t('security-details')}</h4>
</div>
<div className="info-item">
<div className="info-label" >
{t('protection-status')}
</div>
<div className="info-value" >
{fileInfo.protectStatus ? fileInfo.protectStatus : '-'}
</div>
</div>
<div className="info-item">
<div className="info-label" >
{t('number-of-checks')}
</div>
<div className="info-value" >
{fileInfo.checksCount ? fileInfo.checksCount : '0'}
</div>
</div>
</div>
</div>
</div>
)
}