sigit/sigit.io
6
2
Fork 0
Code Issues 55 Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity

style: lint

Browse Source
This commit is contained in:
Davinci 2024-05-21 15:21:21 +02:00
parent 6eedfb8f3f
commit 2c60e2962f
2 changed files with 91 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
src/pages/profile/index.tsx
View File

@ -19,8 +19,8 @@ import { State } from '../../store/rootReducer'
import { getRoboHashPicture, hexToNpub, shorten } from '../../utils' import { getRoboHashPicture, hexToNpub, shorten } from '../../utils'
import { truncate } from 'lodash' import { truncate } from 'lodash'
import { getProfileSettingsRoute } from '../../routes' import { getProfileSettingsRoute } from '../../routes'
import EditIcon from '@mui/icons-material/Edit'; import EditIcon from '@mui/icons-material/Edit'
import LinkIcon from '@mui/icons-material/Link'; import LinkIcon from '@mui/icons-material/Link'
import { LoadingSpinner } from '../../components/LoadingSpinner' import { LoadingSpinner } from '../../components/LoadingSpinner'
export const ProfilePage = () => { export const ProfilePage = () => {
@ -112,7 +112,11 @@ export const ProfilePage = () => {
* @param sx props (MUI) to customize style * @param sx props (MUI) to customize style
* @returns HTML rendered text * @returns HTML rendered text
*/ */
const textElementWithCopyIcon = (text: string, sx?: SxProps<Theme>, shortenOffset?: number) => { const textElementWithCopyIcon = (
text: string,
sx?: SxProps<Theme>,
shortenOffset?: number
) => {
const onClick = () => { const onClick = () => {
navigator.clipboard.writeText(text) navigator.clipboard.writeText(text)
@ -153,8 +157,14 @@ export const ProfilePage = () => {
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />} {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
{pubkey && ( {pubkey && (
<Box className={styles.container}> <Box className={styles.container}>
<Box className={`${styles.banner} ${!profileMetadata || !profileMetadata.banner ? styles.noImage : ''}`}> <Box
{profileMetadata && profileMetadata.banner ? <img src={profileMetadata.banner}/> : ''} className={`${styles.banner} ${!profileMetadata || !profileMetadata.banner ? styles.noImage : ''}`}
>
{profileMetadata && profileMetadata.banner ? (
<img src={profileMetadata.banner} />
) : (
''
)}
</Box> </Box>
<Box className={styles.belowBanner}> <Box className={styles.belowBanner}>
@ -175,64 +185,92 @@ export const ProfilePage = () => {
</div> </div>
</Box> </Box>
<Box className={styles.middle}> <Box className={styles.middle}>
<Typography <Typography
component={Link} component={Link}
to={`https://njump.me/${nostrJoiningBlock?.encodedEventPointer || ''}`} to={`https://njump.me/${nostrJoiningBlock?.encodedEventPointer || ''}`}
target="_blank" target="_blank"
sx={{ color: '#7b7b7b', marginTop: '15px', display: 'block' }} sx={{ color: '#7b7b7b', marginTop: '15px', display: 'block' }}
variant='caption'> variant="caption"
{nostrJoiningBlock ? `On nostr since ${nostrJoiningBlock.block.toLocaleString()}` : 'On nostr since: unknown'} >
{nostrJoiningBlock
? `On nostr since ${nostrJoiningBlock.block.toLocaleString()}`
: 'On nostr since: unknown'}
</Typography> </Typography>
</Box> </Box>
<Box className={styles.right}> <Box className={styles.right}>
{isUsersOwnProfile && ( {isUsersOwnProfile && (
<IconButton onClick={() => navigate(getProfileSettingsRoute(pubkey))}> <IconButton
<EditIcon/> onClick={() => navigate(getProfileSettingsRoute(pubkey))}
>
<EditIcon />
</IconButton> </IconButton>
)} )}
</Box> </Box>
</Box> </Box>
<Box className={styles.head}> <Box className={styles.head}>
<Box className={styles.npubNip}> <Box className={styles.npubNip}>
<Box <Box
sx={{ sx={{
display: 'flex' display: 'flex'
}} }}
>
{profileMetadata && (
<Typography
sx={{ marginRight: 1 }}
variant="h6"
className={styles.bold}
> >
{profileMetadata && {truncate(
<Typography sx={{ marginRight: 1 }} variant="h6" className={styles.bold}> profileMetadata.display_name ||
{truncate( profileMetadata.name ||
profileMetadata.display_name || hexToNpub(pubkey),
profileMetadata.name || {
hexToNpub(pubkey), length: 16
{ }
length: 16 )}
} </Typography>
)} )}
</Typography>}
</Box>
<Box>
{textElementWithCopyIcon(hexToNpub(pubkey) || '', { color: '#5e5e5e' }, 5)}
</Box>
<Box>
{profileMetadata?.nip05 &&
textElementWithCopyIcon(profileMetadata.nip05, { color: '#5e5e5e' })}
</Box>
<Box>
{profileMetadata?.lud16 &&
textElementWithCopyIcon(profileMetadata.lud16, { color: '#5e5e5e' })}
</Box>
</Box>
<Box>
{profileMetadata?.website && (
<Typography sx={{ marginTop: '10px' }} variant='caption' className={`${styles.website} ${styles.captionWrapper}`}>
<Typography variant="caption" sx={{color: '#5e5e5e'}} className={styles.npubNipItem}>{profileMetadata.website}</Typography>
<LinkIcon className={styles.captionIcon}/>
</Typography>
)}
</Box>
</Box> </Box>
<Box>
{textElementWithCopyIcon(
hexToNpub(pubkey) || '',
{ color: '#5e5e5e' },
5
)}
</Box>
<Box>
{profileMetadata?.nip05 &&
textElementWithCopyIcon(profileMetadata.nip05, {
color: '#5e5e5e'
})}
</Box>
<Box>
{profileMetadata?.lud16 &&
textElementWithCopyIcon(profileMetadata.lud16, {
color: '#5e5e5e'
})}
</Box>
</Box>
<Box>
{profileMetadata?.website && (
<Typography
sx={{ marginTop: '10px' }}
variant="caption"
className={`${styles.website} ${styles.captionWrapper}`}
>
<Typography
variant="caption"
sx={{ color: '#5e5e5e' }}
className={styles.npubNipItem}
>
{profileMetadata.website}
</Typography>
<LinkIcon className={styles.captionIcon} />
</Typography>
)}
</Box>
</Box>
<Box> <Box>
{profileMetadata?.about && ( {profileMetadata?.about && (
<Typography mt={1} className={styles.about}> <Typography mt={1} className={styles.about}>

4
src/pages/settings/profile/index.tsx
View File

@ -297,7 +297,9 @@ export const ProfileSettingsPage = () => {
src={profileMetadata.banner} src={profileMetadata.banner}
alt="Banner Image" alt="Banner Image"
/> />
): <Box className={styles.noBanner}> No banner found </Box>} ) : (
<Box className={styles.noBanner}> No banner found </Box>
)}
</ListItem> </ListItem>
{editItem('banner', 'Banner URL', undefined, undefined)} {editItem('banner', 'Banner URL', undefined, undefined)}