Releasing new design #161
@ -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>
|
||||
{fileExtensions.length > 0 ? (
|
||||
<span className={styles.iconLabel}>
|
||||
{/* {fileExtensions.map(ext =>
|
||||
|
||||
return
|
||||
)} */}
|
||||
<FontAwesomeIcon icon={faFilePdf} /> {'PDF'}
|
||||
{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>
|
||||
|
76
src/components/getExtensionIconLabel.tsx
Normal file
76
src/components/getExtensionIconLabel.tsx
Normal file
@ -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()}
|
||||
</>
|
||||
)
|
||||
}
|
@ -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}>
|
||||
|
Loading…
Reference in New Issue
Block a user