index.tsx raw

   1  import FollowButton from '@/components/FollowButton'
   2  import Nip05 from '@/components/Nip05'
   3  import UserAvatar from '@/components/UserAvatar'
   4  import Username from '@/components/Username'
   5  import { Skeleton } from '@/components/ui/skeleton'
   6  import { Pubkey } from '@/domain'
   7  import { cn } from '@/lib/utils'
   8  import { useMemo } from 'react'
   9  import FollowingBadge from '../FollowingBadge'
  10  import TrustScoreBadge from '../TrustScoreBadge'
  11  
  12  export default function UserItem({
  13    userId,
  14    hideFollowButton,
  15    showFollowingBadge = false,
  16    className
  17  }: {
  18    userId: string
  19    hideFollowButton?: boolean
  20    showFollowingBadge?: boolean
  21    className?: string
  22  }) {
  23    const pubkey = useMemo(() => Pubkey.tryFromString(userId)?.hex ?? userId, [userId])
  24  
  25    return (
  26      <div className={cn('flex gap-2 items-center h-14', className)}>
  27        <UserAvatar userId={userId} className="shrink-0" />
  28        <div className="w-full overflow-hidden">
  29          <div className="flex items-center gap-2">
  30            <Username
  31              userId={userId}
  32              className="font-semibold truncate max-w-full w-fit"
  33              skeletonClassName="h-4"
  34            />
  35            {showFollowingBadge && <FollowingBadge pubkey={pubkey} />}
  36            <TrustScoreBadge pubkey={pubkey} />
  37          </div>
  38          <Nip05 pubkey={userId} />
  39        </div>
  40        {!hideFollowButton && <FollowButton pubkey={userId} />}
  41      </div>
  42    )
  43  }
  44  
  45  export function UserItemSkeleton({ hideFollowButton }: { hideFollowButton?: boolean }) {
  46    return (
  47      <div className="flex gap-2 items-center h-14">
  48        <Skeleton className="w-10 h-10 rounded-full shrink-0" />
  49        <div className="w-full">
  50          <div className="py-1">
  51            <Skeleton className="w-16 h-4" />
  52          </div>
  53        </div>
  54        {!hideFollowButton && <Skeleton className="rounded-full min-w-28 h-9" />}
  55      </div>
  56    )
  57  }
  58