Compare commits

..

3 Commits

Author SHA1 Message Date
c3f60b1e64 feat: extension icon label util component 2024-08-06 13:29:43 +02:00
6f05295cd0 docs: add comment for TooltipChild 2024-08-06 13:02:20 +02:00
21caaa7009 fix: sigit links and outline 2024-08-06 12:54:01 +02:00
6 changed files with 104 additions and 29 deletions

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

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

View File

@ -1,5 +1,10 @@
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 (

View File

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

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