src/components/DisplaySigit/index.tsx

@@ -13,7 +13,7 @@ import {
   faCalendar,
   faCopy,
   faEye,
-  faFile
+  faFilePdf
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { UserAvatar } from '../UserAvatar'
@@ -21,7 +21,6 @@ import { UserAvatarGroup } from '../UserAvatarGroup'
 
 import styles from './style.module.scss'
 import { TooltipChild } from '../TooltipChild'
-import { getExtensionIconLabel } from '../getExtensionIconLabel'
 
 type SigitProps = {
   meta: Meta
@@ -29,14 +28,30 @@ 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(() => {
@@ -149,17 +164,13 @@ export const DisplaySigit = ({ meta, profiles, setProfiles }: SigitProps) => {
         <span className={styles.iconLabel}>
           <FontAwesomeIcon icon={faEye} /> {signedStatus}
         </span>
-        {fileExtensions.length > 0 ? (
-          <span className={styles.iconLabel}>
-            {fileExtensions.length > 1 ? (
-              <>
-                <FontAwesomeIcon icon={faFile} /> Multiple File Types
-              </>
-            ) : (
-              getExtensionIconLabel(fileExtensions[0])
-            )}
-          </span>
-        ) : null}
+        <span className={styles.iconLabel}>
+          {/* {fileExtensions.map(ext => 
+
+            return 
+          )} */}
+          <FontAwesomeIcon icon={faFilePdf} /> {'PDF'}
+        </span>
       </div>
       <div className={styles.itemActions}>
         <Tooltip title="Duplicate" arrow placement="top" disableInteractive>

src/components/DisplaySigit/style.module.scss

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

src/components/TooltipChild.tsx

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

src/components/getExtensionIconLabel.tsx

@@ -1,76 +0,0 @@
-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,6 +103,8 @@ 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}>