a8573c99b7
# Description of Changes <!-- Please provide a summary of the changes, including: - What was changed - Why the change was made - Any challenges encountered Closes #(issue_number) --> --- ## Checklist ### General - [ ] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [ ] I have performed a self-review of my own code - [ ] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing) for more details. --------- Co-authored-by: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import './styles.css';
|
|
import FieldBlock from './FieldBlock';
|
|
|
|
const formatDate = (value?: string | null) => {
|
|
if (!value) return '--';
|
|
const parsed = Date.parse(value);
|
|
if (!Number.isNaN(parsed)) {
|
|
return new Date(parsed).toLocaleString();
|
|
}
|
|
return value;
|
|
};
|
|
|
|
const formatFileSize = (bytes?: number | null) => {
|
|
if (bytes === undefined || bytes === null) return '--';
|
|
if (bytes === 0) return '0 B';
|
|
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
|
const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
|
|
const size = bytes / Math.pow(1024, exponent);
|
|
return `${size.toFixed(exponent === 0 ? 0 : 1)} ${units[exponent]}`;
|
|
};
|
|
|
|
const FileSummaryHeader = ({
|
|
fileSize,
|
|
createdAt,
|
|
totalSignatures,
|
|
lastSignatureDate,
|
|
}: {
|
|
fileSize?: number | null;
|
|
createdAt?: string | null;
|
|
totalSignatures: number;
|
|
lastSignatureDate?: string | null;
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
const infoBlocks = [
|
|
FieldBlock(t('files.size', 'File Size'), formatFileSize(fileSize ?? null)),
|
|
FieldBlock(t('files.created', 'Created'), createdAt || '-'),
|
|
FieldBlock(t('validateSignature.signatureDate', 'Signature Date'), formatDate(lastSignatureDate)),
|
|
FieldBlock(t('validateSignature.totalSignatures', 'Total Signatures'), totalSignatures.toString()),
|
|
];
|
|
|
|
return <div className="grid-container">{infoBlocks}</div>;
|
|
};
|
|
|
|
export default FileSummaryHeader;
|
|
|