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

@@ -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/*":