implemented preview field

src/components/database/item-type/util/Preview.module.css

@@ -0,0 +1,23 @@
+.previewBox {
+    text-align: center;
+    margin: 10px;
+}
+
+.previewBox::after {
+    content: "";
+    display: block;
+    clear: both;
+}
+
+.preview {
+    width: 200px;
+    margin: 0 auto;
+    float: left;
+    text-align: center;
+}
+
+.preview caption {
+    width: 200px;
+    margin: 5px;
+    font-size: 80%;
+}

src/components/database/item-type/util/Preview.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { ItemBasicFile } from '../../../../common/ItemUtil';
+import ItemUtil, { ItemBasicFile } from '../../../../common/ItemUtil';
+import styles from './Preview.module.css';
 
 const Preview = (props: { file: ItemBasicFile[] }) => {
     const { file } = props;
@@ -9,18 +10,21 @@ const Preview = (props: { file: ItemBasicFile[] }) => {
     if (data.length === 0) {
         return null;
     }
-    const elements = data.map((value) => {
+    const previews = data.map((value) => {
+        const fileUrl = ItemUtil.getFileUrl(value.file_id);
+        const previewUrl = fileUrl + '.png';
         return (
-            <td key={value.file_id}>{value.original_file_name}</td>
+            <div key={value.file_id} className={styles.preview}>
+                <a href={fileUrl} download={value.original_file_name}>
+                    <img src={previewUrl} alt={value.original_file_name} />
+                </a>
+                <caption>{value.caption}</caption>
+            </div>
         );
     });
     return (
-        <div>
-            <table className="preview">
-                <tbody>
-                    {elements}
-                </tbody>
-            </table>
+        <div className={styles.previewBox}>
+            {previews}
         </div>
     );
 }