2022-02-02 08:41:30 +00:00
|
|
|
import type { OdFileObject } from '../../types'
|
2022-01-16 12:17:42 +00:00
|
|
|
import { FC } from 'react'
|
|
|
|
|
|
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
2022-02-06 12:34:03 +00:00
|
|
|
import { useTranslation } from 'next-i18next'
|
2022-01-16 12:17:42 +00:00
|
|
|
|
|
|
|
import { getFileIcon } from '../../utils/getFileIcon'
|
|
|
|
import { formatModifiedDateTime, humanFileSize } from '../../utils/fileDetails'
|
|
|
|
|
|
|
|
import DownloadButtonGroup from '../DownloadBtnGtoup'
|
|
|
|
import { DownloadBtnContainer, PreviewContainer } from './Containers'
|
|
|
|
|
|
|
|
const DefaultPreview: FC<{ file: OdFileObject }> = ({ file }) => {
|
2022-02-06 12:34:03 +00:00
|
|
|
const { t } = useTranslation()
|
|
|
|
|
2022-01-16 12:17:42 +00:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<PreviewContainer>
|
2022-02-04 08:05:28 +00:00
|
|
|
<div className="items-center px-5 py-4 md:flex md:space-x-8">
|
2022-02-05 12:36:38 +00:00
|
|
|
<div className="rounded-lg border border-gray-900/10 px-8 py-20 text-center dark:border-gray-500/30">
|
2022-01-24 08:03:35 +00:00
|
|
|
<FontAwesomeIcon icon={getFileIcon(file.name, { video: Boolean(file.video) })} />
|
2022-02-05 12:36:38 +00:00
|
|
|
<div className="mt-6 text-sm font-medium line-clamp-3 md:w-28">{file.name}</div>
|
2022-01-16 12:17:42 +00:00
|
|
|
</div>
|
|
|
|
|
2022-02-04 08:05:28 +00:00
|
|
|
<div className="flex flex-col space-y-2 py-4 md:flex-1">
|
2022-01-16 12:17:42 +00:00
|
|
|
<div>
|
2022-02-06 12:34:03 +00:00
|
|
|
<div className="py-2 text-xs font-medium uppercase opacity-80">{t('Last modified')}</div>
|
2022-01-16 12:17:42 +00:00
|
|
|
<div>{formatModifiedDateTime(file.lastModifiedDateTime)}</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div>
|
2022-02-06 12:34:03 +00:00
|
|
|
<div className="py-2 text-xs font-medium uppercase opacity-80">{t('File size')}</div>
|
2022-01-16 12:17:42 +00:00
|
|
|
<div>{humanFileSize(file.size)}</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div>
|
2022-02-06 12:34:03 +00:00
|
|
|
<div className="py-2 text-xs font-medium uppercase opacity-80">{t('MIME type')}</div>
|
|
|
|
<div>{file.file?.mimeType || t('Unavailable')}</div>
|
2022-01-16 12:17:42 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<div>
|
2022-02-06 12:34:03 +00:00
|
|
|
<div className="py-2 text-xs font-medium uppercase opacity-80">{t('Hashes')}</div>
|
2022-02-04 08:05:28 +00:00
|
|
|
<table className="block w-full overflow-scroll whitespace-nowrap text-sm md:table">
|
2022-01-16 12:17:42 +00:00
|
|
|
<tbody>
|
2022-02-04 08:05:28 +00:00
|
|
|
<tr className="border-y bg-white dark:border-gray-700 dark:bg-gray-900">
|
|
|
|
<td className="bg-gray-50 py-1 px-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-400">
|
2022-01-16 12:17:42 +00:00
|
|
|
Quick XOR
|
|
|
|
</td>
|
2022-02-04 08:05:28 +00:00
|
|
|
<td className="whitespace-nowrap py-1 px-3 font-mono text-gray-500 dark:text-gray-400">
|
2022-02-09 18:15:14 +00:00
|
|
|
{file.file.hashes?.quickXorHash || t('Unavailable')}
|
2022-01-16 12:17:42 +00:00
|
|
|
</td>
|
|
|
|
</tr>
|
2022-02-04 08:05:28 +00:00
|
|
|
<tr className="border-y bg-white dark:border-gray-700 dark:bg-gray-900">
|
|
|
|
<td className="bg-gray-50 py-1 px-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-400">
|
2022-01-16 12:17:42 +00:00
|
|
|
SHA1
|
|
|
|
</td>
|
2022-02-04 08:05:28 +00:00
|
|
|
<td className="whitespace-nowrap py-1 px-3 font-mono text-gray-500 dark:text-gray-400">
|
2022-02-09 18:15:14 +00:00
|
|
|
{file.file.hashes?.sha1Hash || t('Unavailable')}
|
2022-01-16 12:17:42 +00:00
|
|
|
</td>
|
|
|
|
</tr>
|
2022-02-04 08:05:28 +00:00
|
|
|
<tr className="border-y bg-white dark:border-gray-700 dark:bg-gray-900">
|
|
|
|
<td className="bg-gray-50 py-1 px-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-400">
|
2022-01-16 12:17:42 +00:00
|
|
|
SHA256
|
|
|
|
</td>
|
2022-02-04 08:05:28 +00:00
|
|
|
<td className="whitespace-nowrap py-1 px-3 font-mono text-gray-500 dark:text-gray-400">
|
2022-02-09 18:15:14 +00:00
|
|
|
{file.file.hashes?.sha256Hash || t('Unavailable')}
|
2022-01-16 12:17:42 +00:00
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</PreviewContainer>
|
|
|
|
<DownloadBtnContainer>
|
|
|
|
<DownloadButtonGroup downloadUrl={file['@microsoft.graph.downloadUrl']} />
|
|
|
|
</DownloadBtnContainer>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default DefaultPreview
|