feat(design): home page new design and functionality #135

Merged
enes merged 24 commits from issue-121 into staging 2024-08-14 08:44:09 +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, 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>
<span className={styles.iconLabel}> {fileExtensions.length > 0 ? (
{/* {fileExtensions.map(ext => <span className={styles.iconLabel}>
{fileExtensions.length > 1 ? (
return <>
)} */} <FontAwesomeIcon icon={faFile} /> Multiple File Types
<FontAwesomeIcon icon={faFilePdf} /> {'PDF'} </>
</span> ) : (
getExtensionIconLabel(fileExtensions[0])
)}
</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>

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