From 34913cfc833fb0ee3def2bdaa6238a2596726ea4 Mon Sep 17 00:00:00 2001
From: Athurg Gooth <github@gooth.org>
Date: Fri, 19 May 2023 08:31:32 +0800
Subject: [PATCH] feat: show thumbnail in resource dashboard (#1666)

* Add image thumbnail instead of an icon

* Change thumbnail size of dashboard to fixed

* Fix for eslint-checks

* Fix for eslint-checks

* Replace css with tailwind

* Remove the parent div used for style

* Show preview while click on the resource

* Change for review Suggested by @Zeng1998

---------

Co-authored-by: Athurg Feng <athurg@gooth.org>
---
 web/src/components/ResourceCover.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/web/src/components/ResourceCover.tsx b/web/src/components/ResourceCover.tsx
index 5288327ea..42e6ac451 100644
--- a/web/src/components/ResourceCover.tsx
+++ b/web/src/components/ResourceCover.tsx
@@ -1,5 +1,7 @@
 import React from "react";
 import Icon from "./Icon";
+import { getResourceUrl } from "@/utils/resource";
+import showPreviewImageDialog from "./PreviewImageDialog";
 import "@/less/resource-cover.less";
 
 interface ResourceCoverProps {
@@ -34,9 +36,12 @@ const getResourceType = (resource: Resource) => {
 
 const ResourceCover = ({ resource }: ResourceCoverProps) => {
   const resourceType = getResourceType(resource);
+  const resourceUrl = getResourceUrl(resource);
   switch (resourceType) {
     case "image/*":
-      return <Icon.FileImage className="resource-cover" />;
+      return (
+        <img className="resource-cover h-20 w-20" src={resourceUrl + "?thumbnail=1"} onClick={() => showPreviewImageDialog(resourceUrl)} />
+      );
     case "video/*":
       return <Icon.FileVideo2 className="resource-cover" />;
     case "audio/*":