59 lines
1.3 KiB
TypeScript
59 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
|
|
interface CustomMediaInfoPanelProps {
|
|
name: string;
|
|
size: number;
|
|
type: string;
|
|
dateModified: number;
|
|
description?: string | null;
|
|
}
|
|
|
|
const CustomMediaInfoPanel: React.FC<CustomMediaInfoPanelProps> = ({
|
|
name,
|
|
size,
|
|
type,
|
|
dateModified,
|
|
description,
|
|
}) => {
|
|
function formatLocalDate(timestamp: number | undefined | null) {
|
|
if (!timestamp || isNaN(timestamp)) return '-';
|
|
const date = new Date(timestamp * 1000);
|
|
return date.toLocaleString('de-DE');
|
|
}
|
|
return (
|
|
<div
|
|
style={{
|
|
padding: 16,
|
|
border: '1px solid #eee',
|
|
borderRadius: 8,
|
|
background: '#fafafa',
|
|
maxWidth: 400,
|
|
}}
|
|
>
|
|
<h3 style={{ marginBottom: 12 }}>Datei-Eigenschaften</h3>
|
|
<div>
|
|
<b>Name:</b> {name || '-'}
|
|
</div>
|
|
<div>
|
|
<b>Typ:</b> {type || '-'}
|
|
</div>
|
|
<div>
|
|
<b>Größe:</b> {typeof size === 'number' && !isNaN(size) ? size + ' Bytes' : '-'}
|
|
</div>
|
|
<div>
|
|
<b>Geändert:</b> {formatLocalDate(dateModified)}
|
|
</div>
|
|
<div>
|
|
<b>Beschreibung:</b>{' '}
|
|
{description && description !== 'null' ? (
|
|
description
|
|
) : (
|
|
<span style={{ color: '#888' }}>Keine Beschreibung</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CustomMediaInfoPanel;
|