index.tsx raw

   1  import { Pubkey } from '@/domain'
   2  import { useFetchProfile } from '@/hooks'
   3  import { useMemo } from 'react'
   4  import FollowButton from '../FollowButton'
   5  import Nip05 from '../Nip05'
   6  import ProfileAbout from '../ProfileAbout'
   7  import TextWithEmojis from '../TextWithEmojis'
   8  import TrustScoreBadge from '../TrustScoreBadge'
   9  import { SimpleUserAvatar } from '../UserAvatar'
  10  
  11  export default function ProfileCard({ userId }: { userId: string }) {
  12    const pubkey = useMemo(() => Pubkey.tryFromString(userId)?.hex ?? userId, [userId])
  13    const { profile } = useFetchProfile(userId)
  14    const { username, about, emojis } = profile || {}
  15  
  16    return (
  17      <div className="w-full flex flex-col gap-2 not-prose">
  18        <div className="flex space-x-2 w-full items-start justify-between">
  19          <SimpleUserAvatar userId={pubkey} className="w-12 h-12" />
  20          <FollowButton pubkey={pubkey} />
  21        </div>
  22        <div>
  23          <div className="flex gap-2 items-center">
  24            <TextWithEmojis
  25              text={username || ''}
  26              emojis={emojis}
  27              className="text-lg font-semibold truncate"
  28            />
  29            <TrustScoreBadge pubkey={pubkey} />
  30          </div>
  31          <Nip05 pubkey={pubkey} />
  32        </div>
  33        {about && (
  34          <ProfileAbout
  35            about={about}
  36            emojis={emojis}
  37            className="text-sm text-wrap break-words w-full overflow-hidden text-ellipsis line-clamp-6"
  38          />
  39        )}
  40      </div>
  41    )
  42  }
  43