Releasing new design #161

Merged
b merged 241 commits from staging into main 2024-08-21 11:38:25 +00:00
3 changed files with 91 additions and 28 deletions
Showing only changes of commit c3f60b1e64 - Show all commits

View File

@ -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>

View 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()}
</>
)
}

View File

@ -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}>