feat: extension icon label util component

src/components/DisplaySigit/index.tsx

@@ -13,7 +13,7 @@ import {
   faCalendar,
   faCopy,
   faEye,
-  faFilePdf
+  faFile
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { UserAvatar } from '../UserAvatar'
@@ -21,6 +21,7 @@ import { UserAvatarGroup } from '../UserAvatarGroup'
 
 import styles from './style.module.scss'
 import { TooltipChild } from '../TooltipChild'
+import { getExtensionIconLabel } from '../getExtensionIconLabel'
 
 type SigitProps = {
   meta: Meta
@@ -28,30 +29,14 @@ type SigitProps = {
   setProfiles: Dispatch<SetStateAction<{ [key: string]: ProfileMetadata }>>
 }
 
-// function
-// const ExtensionIconMapper = new Map<string, ReactNode>([
-//   [
-//     'pdf',
-//     <>
-//       <FontAwesomeIcon icon={faFilePdf} /> PDF
-//     </>
-//   ],
-//   [
-//     'csv',
-//     <>
-//       <FontAwesomeIcon icon={faFileCsv} /> CSV
-//     </>
-//   ]
-// ])
-
 export const DisplaySigit = ({ meta, profiles, setProfiles }: SigitProps) => {
   const {
     title,
     createdAt,
     submittedBy,
     signers,
-    signedStatus
-    // fileExtensions
+    signedStatus,
+    fileExtensions
   } = useSigitMeta(meta)
 
   useEffect(() => {
@@ -164,13 +149,17 @@ export const DisplaySigit = ({ meta, profiles, setProfiles }: SigitProps) => {
         <span className={styles.iconLabel}>
           <FontAwesomeIcon icon={faEye} /> {signedStatus}
         </span>
-        <span className={styles.iconLabel}>
-          {/* {fileExtensions.map(ext => 
-
-            return 
-          )} */}
-          <FontAwesomeIcon icon={faFilePdf} /> {'PDF'}
-        </span>
+        {fileExtensions.length > 0 ? (
+          <span className={styles.iconLabel}>
+            {fileExtensions.length > 1 ? (
+              <>
+                <FontAwesomeIcon icon={faFile} /> Multiple File Types
+              </>
+            ) : (
+              getExtensionIconLabel(fileExtensions[0])
+            )}
+          </span>
+        ) : null}
       </div>
       <div className={styles.itemActions}>
         <Tooltip title="Duplicate" arrow placement="top" disableInteractive>

src/components/DisplaySigit/style.module.scss

@@ -6,6 +6,8 @@
   background-color: $overlay-background-color;
   border-radius: 4px;
 
+  outline: none !important;
+
   display: flex;
   padding: 15px;
   gap: 15px;
@@ -79,6 +81,7 @@
 
 .title {
   font-size: 20px;
+  color: $text-color;
 }
 
 .users {

src/components/TooltipChild.tsx

@@ -1,5 +1,10 @@
 import { forwardRef, PropsWithChildren } from 'react'
 
+/**
+ * Helper wrapper for custom child components when using `@mui/material/tooltips`.
+ * Mui Tooltip works out-the-box with other `@mui` components but when using custom they require ref.
+ * @source https://mui.com/material-ui/react-tooltip/#custom-child-element
+ */
 export const TooltipChild = forwardRef<HTMLSpanElement, PropsWithChildren>(
   ({ children, ...rest }, ref) => {
     return (

src/components/UserAvatar/index.tsx

@@ -16,7 +16,11 @@ interface UserAvatarProps {
  */
 export const UserAvatar = ({ pubkey, name, image }: UserAvatarProps) => {
   return (
-    <Link to={getProfileRoute(pubkey)} className={styles.container}>
+    <Link
+      to={getProfileRoute(pubkey)}
+      className={styles.container}
+      tabIndex={-1}
+    >
       <AvatarIconButton
         src={image}
         hexKey={pubkey}

src/components/getExtensionIconLabel.tsx

@@ -0,0 +1,76 @@
+import {
+  faFilePdf,
+  faFileExcel,
+  faFileWord,
+  faFilePowerpoint,
+  faFileZipper,
+  faFileCsv,
+  faFileLines,
+  faFileImage,
+  faFile,
+  IconDefinition
+} from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+export const getExtensionIconLabel = (extension: string) => {
+  let icon: IconDefinition
+  switch (extension.toLowerCase()) {
+    case 'pdf':
+      icon = faFilePdf
+      break
+    case 'json':
+      icon = faFilePdf
+      break
+
+    case 'xslx':
+    case 'xsl':
+      icon = faFileExcel
+      break
+
+    case 'doc':
+    case 'docx':
+      icon = faFileWord
+      break
+
+    case 'ppt':
+    case 'pptx':
+      icon = faFilePowerpoint
+      break
+
+    case 'zip':
+    case '7z':
+    case 'rar':
+    case 'tar':
+    case 'gz':
+      icon = faFileZipper
+      break
+
+    case 'csv':
+      icon = faFileCsv
+      break
+
+    case 'txt':
+      icon = faFileLines
+      break
+
+    case 'png':
+    case 'jpg':
+    case 'jpeg':
+    case 'gif':
+    case 'svg':
+    case 'bmp':
+    case 'ico':
+      icon = faFileImage
+      break
+
+    default:
+      icon = faFile
+      return
+  }
+
+  return (
+    <>
+      <FontAwesomeIcon icon={icon} /> {extension.toUpperCase()}
+    </>
+  )
+}

src/pages/home/index.tsx

@@ -103,8 +103,6 @@ export const HomePage = () => {
   const [isFilterVisible, setIsFilterVisible] = useState(true)
   const [sort, setSort] = useState<Sort>('asc')
 
-  console.log(filter, sort)
-
   return (
     <Container className={styles.container}>
       <div className={styles.header}>