You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.3 KiB
45 lines
1.3 KiB
import FollowButton from '@/components/FollowButton' |
|
import Nip05 from '@/components/Nip05' |
|
import UserAvatar from '@/components/UserAvatar' |
|
import Username from '@/components/Username' |
|
import { Skeleton } from '@/components/ui/skeleton' |
|
import { cn } from '@/lib/utils' |
|
|
|
export default function UserItem({ |
|
pubkey, |
|
hideFollowButton, |
|
className |
|
}: { |
|
pubkey: string |
|
hideFollowButton?: boolean |
|
className?: string |
|
}) { |
|
return ( |
|
<div className={cn('flex gap-2 items-center h-14', className)}> |
|
<UserAvatar userId={pubkey} className="shrink-0" /> |
|
<div className="w-full overflow-hidden"> |
|
<Username |
|
userId={pubkey} |
|
className="font-semibold truncate max-w-full w-fit" |
|
skeletonClassName="h-4" |
|
/> |
|
<Nip05 pubkey={pubkey} /> |
|
</div> |
|
{!hideFollowButton && <FollowButton pubkey={pubkey} />} |
|
</div> |
|
) |
|
} |
|
|
|
export function UserItemSkeleton({ hideFollowButton }: { hideFollowButton?: boolean }) { |
|
return ( |
|
<div className="flex gap-2 items-center h-14"> |
|
<Skeleton className="w-10 h-10 rounded-full shrink-0" /> |
|
<div className="w-full"> |
|
<div className="py-1"> |
|
<Skeleton className="w-16 h-4" /> |
|
</div> |
|
</div> |
|
{!hideFollowButton && <Skeleton className="rounded-full min-w-28 h-9" />} |
|
</div> |
|
) |
|
}
|
|
|