first commit

common/resources/client/uploads/preview/file-preview/default-file-preview.tsx

@@ -0,0 +1,43 @@
+import {ReactNode, useContext} from 'react';
+import clsx from 'clsx';
+import {Button} from '../../../ui/buttons/button';
+import {downloadFileFromUrl} from '../../utils/download-file-from-url';
+import {FilePreviewContext} from '../file-preview-context';
+import {Trans} from '../../../i18n/trans';
+import {FilePreviewProps} from './file-preview-props';
+import {useFileEntryUrls} from '../../hooks/file-entry-urls';
+
+interface Props extends FilePreviewProps {
+  message?: ReactNode;
+}
+export function DefaultFilePreview({message, className, allowDownload}: Props) {
+  const {entries, activeIndex} = useContext(FilePreviewContext);
+  const activeEntry = entries[activeIndex];
+  const content = message || <Trans message="No file preview available" />;
+  const {downloadUrl} = useFileEntryUrls(activeEntry);
+  return (
+    <div
+      className={clsx(
+        className,
+        'shadow bg-paper max-w-400 w-[calc(100%-40px)] text-center p-40 rounded'
+      )}
+    >
+      <div className="text-lg">{content}</div>
+      {allowDownload && (
+        <div className="block mt-20 text-center">
+          <Button
+            variant="flat"
+            color="primary"
+            onClick={() => {
+              if (downloadUrl) {
+                downloadFileFromUrl(downloadUrl);
+              }
+            }}
+          >
+            <Trans message="Download" />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}