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

64 lines
1.6 KiB
TypeScript

'use client'
import { FileDetails } from '@/app/[locale]/pages/file/[id]/page';
import { convertBytes } from '@/app/lib/convertBytes';
import { formatDate } from '@/app/lib/formatDate';
import { useTranslations } from 'next-intl';
import { useEffect } from 'react';
export default function FilenPageFileInfo({ fileInfo }: { fileInfo: FileDetails }) {
const t = useTranslations('Global');
return (
<div
className="block-wrapper"
>
<div className="content-card">
<div className="card-header">
<h3 className="card-title">
{t('file-information')}
</h3>
</div>
<div className="info-row">
<span className="info-label">
ID
</span>
<span className="info-value">
{fileInfo ? fileInfo.supportId : '#'}
</span>
</div>
<div className="info-row">
<span className="info-label">
{t('file-type')}
</span>
<span className="info-value">
{fileInfo ? fileInfo.mimeType : '#'}
</span>
</div>
<div className="info-row">
<span className="info-label">
{t('size')}
</span>
<span className="info-value">{fileInfo ? convertBytes(fileInfo.fileSize) : '#'}</span>
</div>
<div className="info-row">
<span className="info-label">
{t('loaded')}
</span>
<span className="info-value">
{fileInfo ? formatDate(fileInfo.createdAt) : '#'}
</span>
</div>
<div className="info-row">
<span className="info-label">
{t('monitoring')}
</span>
<span className="info-value">
{fileInfo ? fileInfo.monitoring : '#'}
</span>
</div>
</div>
</div>
)
}