Releasing new design #161
@ -13,7 +13,7 @@ import {
|
|||||||
faCalendar,
|
faCalendar,
|
||||||
faCopy,
|
faCopy,
|
||||||
faEye,
|
faEye,
|
||||||
faFilePdf
|
faFile
|
||||||
} from '@fortawesome/free-solid-svg-icons'
|
} from '@fortawesome/free-solid-svg-icons'
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
import { UserAvatar } from '../UserAvatar'
|
import { UserAvatar } from '../UserAvatar'
|
||||||
@ -21,6 +21,7 @@ import { UserAvatarGroup } from '../UserAvatarGroup'
|
|||||||
|
|
||||||
import styles from './style.module.scss'
|
import styles from './style.module.scss'
|
||||||
import { TooltipChild } from '../TooltipChild'
|
import { TooltipChild } from '../TooltipChild'
|
||||||
|
import { getExtensionIconLabel } from '../getExtensionIconLabel'
|
||||||
|
|
||||||
type SigitProps = {
|
type SigitProps = {
|
||||||
meta: Meta
|
meta: Meta
|
||||||
@ -28,30 +29,14 @@ type SigitProps = {
|
|||||||
setProfiles: Dispatch<SetStateAction<{ [key: string]: ProfileMetadata }>>
|
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) => {
|
export const DisplaySigit = ({ meta, profiles, setProfiles }: SigitProps) => {
|
||||||
const {
|
const {
|
||||||
title,
|
title,
|
||||||
createdAt,
|
createdAt,
|
||||||
submittedBy,
|
submittedBy,
|
||||||
signers,
|
signers,
|
||||||
signedStatus
|
signedStatus,
|
||||||
// fileExtensions
|
fileExtensions
|
||||||
} = useSigitMeta(meta)
|
} = useSigitMeta(meta)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -164,13 +149,17 @@ export const DisplaySigit = ({ meta, profiles, setProfiles }: SigitProps) => {
|
|||||||
<span className={styles.iconLabel}>
|
<span className={styles.iconLabel}>
|
||||||
<FontAwesomeIcon icon={faEye} /> {signedStatus}
|
<FontAwesomeIcon icon={faEye} /> {signedStatus}
|
||||||
</span>
|
</span>
|
||||||
|
{fileExtensions.length > 0 ? (
|
||||||
<span className={styles.iconLabel}>
|
<span className={styles.iconLabel}>
|
||||||
{/* {fileExtensions.map(ext =>
|
{fileExtensions.length > 1 ? (
|
||||||
|
<>
|
||||||
return
|
<FontAwesomeIcon icon={faFile} /> Multiple File Types
|
||||||
)} */}
|
</>
|
||||||
<FontAwesomeIcon icon={faFilePdf} /> {'PDF'}
|
) : (
|
||||||
|
getExtensionIconLabel(fileExtensions[0])
|
||||||
|
)}
|
||||||
</span>
|
</span>
|
||||||
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.itemActions}>
|
<div className={styles.itemActions}>
|
||||||
<Tooltip title="Duplicate" arrow placement="top" disableInteractive>
|
<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 [isFilterVisible, setIsFilterVisible] = useState(true)
|
||||||
const [sort, setSort] = useState<Sort>('asc')
|
const [sort, setSort] = useState<Sort>('asc')
|
||||||
|
|
||||||
console.log(filter, sort)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container className={styles.container}>
|
<Container className={styles.container}>
|
||||||
<div className={styles.header}>
|
<div className={styles.header}>
|
||||||
|
Loading…
Reference in New Issue
Block a user