67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
import React, { ReactElement, useState } from 'react'
|
|
import PublisherLinks from './PublisherLinks'
|
|
import Markdown from '@shared/Markdown'
|
|
import Stats from './Stats'
|
|
import Account from './Account'
|
|
import styles from './index.module.css'
|
|
import { useProfile } from '@context/Profile'
|
|
|
|
const isDescriptionTextClamped = () => {
|
|
const el = document.getElementById('description')
|
|
if (el) return el.scrollHeight > el.clientHeight
|
|
}
|
|
|
|
const LinkExternal = ({ url, text }: { url: string; text: string }) => {
|
|
return (
|
|
<a href={url} target="_blank" rel="noreferrer">
|
|
{text}
|
|
</a>
|
|
)
|
|
}
|
|
|
|
export default function AccountHeader({
|
|
accountId
|
|
}: {
|
|
accountId: string
|
|
}): ReactElement {
|
|
const { profile } = useProfile()
|
|
const [isShowMore, setIsShowMore] = useState(false)
|
|
|
|
const toogleShowMore = () => {
|
|
setIsShowMore(!isShowMore)
|
|
}
|
|
|
|
return (
|
|
<div className={styles.grid}>
|
|
<div>
|
|
<Account accountId={accountId} />
|
|
<Stats accountId={accountId} />
|
|
</div>
|
|
|
|
<div>
|
|
<Markdown text={profile?.description} className={styles.description} />
|
|
{isDescriptionTextClamped() ? (
|
|
<span className={styles.more} onClick={toogleShowMore}>
|
|
<LinkExternal
|
|
url={`https://app.ens.domains/name/${profile?.name}`}
|
|
text="Read more on ENS"
|
|
/>
|
|
</span>
|
|
) : (
|
|
''
|
|
)}
|
|
{profile?.links?.length > 0 && (
|
|
<PublisherLinks className={styles.publisherLinks} />
|
|
)}
|
|
</div>
|
|
<div className={styles.meta}>
|
|
Profile data from{' '}
|
|
<LinkExternal
|
|
url={`https://app.ens.domains/name/${profile?.name}`}
|
|
text="ENS"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|