refactor for file page

src/app/ui/file-page/file-page-file-info.tsx

@@ -0,0 +1,64 @@
+'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>
+	)
+}