Feat: Modify the style of the dataset page #3221 (#7446)

### What problem does this PR solve?

Feat:  Modify the style of the dataset page #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/icon-font.tsx

@@ -1,4 +1,6 @@
+import { FileIconMap } from '@/constants/file';
 import { cn } from '@/lib/utils';
+import { getExtension } from '@/utils/document-util';
 
 type IconFontType = {
   name: string;
@@ -10,3 +12,18 @@ export const IconFont = ({ name, className }: IconFontType) => (
     <use xlinkHref={`#icon-${name}`} />
   </svg>
 );
+
+export function FileIcon({
+  name,
+  className,
+  type,
+}: IconFontType & { type?: string }) {
+  const isFolder = type === 'folder';
+  return (
+    <span className={cn('size-4', className)}>
+      <IconFont
+        name={isFolder ? 'file' : FileIconMap[getExtension(name)]}
+      ></IconFont>
+    </span>
+  );
+}