90 lines
4 KiB
TypeScript
90 lines
4 KiB
TypeScript
import React from 'react'
|
|
import { FaFileAlt, FaDownload } from 'react-icons/fa'
|
|
import dayjs from 'dayjs'
|
|
import { DocumentDto } from '@/proxy/intranet/models'
|
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
|
import { getFileIcon, getFileType } from '@/proxy/intranet/utils'
|
|
import { FILE_URL } from '@/constants/app.constant'
|
|
|
|
const formatFileSize = (bytes: number): string => {
|
|
if (bytes === 0) return '0 B'
|
|
const k = 1024
|
|
const sizes = ['B', 'KB', 'MB', 'GB']
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
|
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`
|
|
}
|
|
|
|
const RecentDocuments: React.FC<{ documents: DocumentDto[] }> = ({ documents }) => {
|
|
const { translate } = useLocalization();
|
|
return (
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
|
|
<div className="p-4 border-b border-gray-200 dark:border-gray-700">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-base font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
|
<FaFileAlt className="w-5 h-5" />
|
|
{translate('::App.Platform.Intranet.Widgets.RecentDocuments.Title')}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div className="divide-y divide-gray-200 dark:divide-gray-700">
|
|
{documents.length > 0 ? (
|
|
documents.slice(0, 3).map((doc) => (
|
|
<div
|
|
key={doc.id}
|
|
className="p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
|
|
{getFileIcon(doc.extension)}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h4 className="text-sm font-medium text-gray-900 dark:text-white truncate">
|
|
{doc.name}
|
|
</h4>
|
|
<p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
|
{getFileType(doc.extension)}
|
|
<span className="mx-1">•</span>
|
|
{formatFileSize(doc.size)}
|
|
</p>
|
|
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1 flex items-center gap-2">
|
|
<span>{dayjs(doc.modifiedAt).fromNow()}</span>
|
|
{doc.isReadOnly && (
|
|
<>
|
|
<span>•</span>
|
|
<span className="text-orange-500">🔒 {translate('::App.Platform.Intranet.Widgets.RecentDocuments.ReadOnly')}</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
const url = FILE_URL(doc.path, doc.tenantId)
|
|
const link = document.createElement('a')
|
|
link.href = url
|
|
link.download = doc.name
|
|
link.target = '_blank'
|
|
link.rel = 'noopener noreferrer'
|
|
document.body.appendChild(link)
|
|
link.click()
|
|
document.body.removeChild(link)
|
|
}}
|
|
className="p-2 hover:bg-blue-100 dark:hover:bg-blue-900/30 rounded-lg transition-colors group"
|
|
title={translate('::App.Platform.Intranet.Widgets.RecentDocuments.Download')}
|
|
>
|
|
<FaDownload className="w-5 h-5 text-gray-600 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="p-4 text-center text-sm text-gray-500 dark:text-gray-400">
|
|
{translate('::App.Platform.Intranet.Widgets.RecentDocuments.NoDocuments')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default RecentDocuments
|