add preview for images in tanstak-table

src/app/components/tanstak-table/TanstakTable.tsx

@@ -12,7 +12,7 @@ import {
 	ColumnFiltersState,
 	PaginationState
 } from '@tanstack/react-table';
-import { IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileDownload, IconInfo, IconEye, IconCheck } from '@/app/ui/icons/icons';
+import { IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileDownload, IconInfo, IconEye, IconCheck, IconImageFile } from '@/app/ui/icons/icons';
 import { useTranslations, useLocale } from 'next-intl';
 import DropDownList from '@/app/components/DropDownList';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
@@ -31,6 +31,7 @@ import { downloadFile } from '@/app/actions/fileEntity';
 import { useDebouncedCallback } from 'use-debounce';
 import Link from 'next/link';
 import { SelectedFilesAction } from '@/app/components/tanstak-table/SelectedFilesActions';
+import Image from 'next/image';
 
 export type FileItem = {
 	id: string;
@@ -44,6 +45,7 @@ export type FileItem = {
 	protectStatus: string;
 	_original?: ApiFile;
 	supportId: number;
+	thumbnailFileUrl: string
 };
 
 type ApiFile = {
@@ -58,6 +60,7 @@ type ApiFile = {
 	protectStatus: string;
 	supportId: number;
 	fileName: string;
+	thumbnailFileUrl: string;
 };
 
 type ApiResponse = {
@@ -175,6 +178,8 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 				return { items: [], total_count: 0, page: 1, pageSize: pagination.pageSize };
 			}
 
+			/* console.log(data.files) */;
+
 			const items = data.files.map((item: ApiFile) => ({
 				id: item.id,
 				fileName: item.originalFileName,
@@ -186,7 +191,8 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 				monitoring: item.monitoring,
 				protectStatus: item.protectStatus,
 				supportId: item.supportId,
-				_original: item
+				_original: item,
+				thumbnailFileUrl: item.thumbnailFileUrl
 			}));
 
 			return {
@@ -392,7 +398,25 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 				),
 				cell: ({ row }) => (
 					<div className="flex items-center space-x-2 table-item table-item-file-name">
-						<FileTypeIcon type={row.original.fileType} />
+						{row.original.fileType === 'image' && row.original?.thumbnailFileUrl.length !== 0 ? (
+							<span
+								className="table-item-file-name-image-wrapper"
+							>
+								<Image
+									sizes="40px"
+									src={row.original?.thumbnailFileUrl}
+									alt={row.original?.fileName}
+									unoptimized
+									fill
+									onError={(e) => {
+										const target = e.target as HTMLImageElement;
+										target.src = '/images/no-image.png';
+									}}
+								/>
+							</span>
+						) : (
+							<FileTypeIcon type={row.original.fileType} />
+						)}
 						<div>
 							<div className="font-medium w-full truncate" title={row.original.fileName}>
 								<span className="font-semibold">

src/app/styles/pages-styles.scss

@@ -901,6 +901,16 @@
 						padding: 15px 16px;
 					}
 				}
+
+				.table-item-file-name-image-wrapper {
+					width: 40px;
+					height: 40px;
+					position: relative;
+
+					img {
+						object-fit: contain;
+					}
+				}
 			}
 
 			.table-item {