style: lint
This commit is contained in:
parent
6eedfb8f3f
commit
2c60e2962f
@ -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}>
|
||||||
@ -180,13 +190,18 @@ export const ProfilePage = () => {
|
|||||||
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
|
||||||
|
onClick={() => navigate(getProfileSettingsRoute(pubkey))}
|
||||||
|
>
|
||||||
<EditIcon />
|
<EditIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
)}
|
)}
|
||||||
@ -199,8 +214,12 @@ export const ProfilePage = () => {
|
|||||||
display: 'flex'
|
display: 'flex'
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{profileMetadata &&
|
{profileMetadata && (
|
||||||
<Typography sx={{ marginRight: 1 }} variant="h6" className={styles.bold}>
|
<Typography
|
||||||
|
sx={{ marginRight: 1 }}
|
||||||
|
variant="h6"
|
||||||
|
className={styles.bold}
|
||||||
|
>
|
||||||
{truncate(
|
{truncate(
|
||||||
profileMetadata.display_name ||
|
profileMetadata.display_name ||
|
||||||
profileMetadata.name ||
|
profileMetadata.name ||
|
||||||
@ -209,25 +228,44 @@ export const ProfilePage = () => {
|
|||||||
length: 16
|
length: 16
|
||||||
}
|
}
|
||||||
)}
|
)}
|
||||||
</Typography>}
|
</Typography>
|
||||||
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
<Box>
|
<Box>
|
||||||
{textElementWithCopyIcon(hexToNpub(pubkey) || '', { color: '#5e5e5e' }, 5)}
|
{textElementWithCopyIcon(
|
||||||
|
hexToNpub(pubkey) || '',
|
||||||
|
{ color: '#5e5e5e' },
|
||||||
|
5
|
||||||
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
<Box>
|
<Box>
|
||||||
{profileMetadata?.nip05 &&
|
{profileMetadata?.nip05 &&
|
||||||
textElementWithCopyIcon(profileMetadata.nip05, { color: '#5e5e5e' })}
|
textElementWithCopyIcon(profileMetadata.nip05, {
|
||||||
|
color: '#5e5e5e'
|
||||||
|
})}
|
||||||
</Box>
|
</Box>
|
||||||
<Box>
|
<Box>
|
||||||
{profileMetadata?.lud16 &&
|
{profileMetadata?.lud16 &&
|
||||||
textElementWithCopyIcon(profileMetadata.lud16, { color: '#5e5e5e' })}
|
textElementWithCopyIcon(profileMetadata.lud16, {
|
||||||
|
color: '#5e5e5e'
|
||||||
|
})}
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
<Box>
|
<Box>
|
||||||
{profileMetadata?.website && (
|
{profileMetadata?.website && (
|
||||||
<Typography sx={{ marginTop: '10px' }} variant='caption' className={`${styles.website} ${styles.captionWrapper}`}>
|
<Typography
|
||||||
<Typography variant="caption" sx={{color: '#5e5e5e'}} className={styles.npubNipItem}>{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} />
|
<LinkIcon className={styles.captionIcon} />
|
||||||
</Typography>
|
</Typography>
|
||||||
)}
|
)}
|
||||||
|
@ -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)}
|
||||||
|
Loading…
Reference in New Issue
Block a user