User Info

1'use client';
2 
3import React from 'react';
4import { ProfilePicture } from './profile-picture';
5import { UsernameDisplay } from './username-display';
6import { useProfile } from '@/hooks/useProfile';
7import { cn } from '@/lib/utils/deso';
8import { Skeleton } from '@/components/ui/skeleton';
9import { UserPublicKey } from './user-public-key';
10import { Profile } from '@/lib/schemas/deso';
11 
12export interface UserInfoProps {
13  publicKey: string;
14  profile?: Profile;
15  pictureSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
16  showVerification?: boolean;
17  showCopyButton?: boolean;
18  truncate?: boolean;
19  maxLength?: number;
20  className?: string;
21  usernameClassName?: string;
22  layout?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
23  gap?: 'none' | 'sm' | 'md' | 'lg';
24  showPublicKey?: boolean;
25  isVerified?: boolean;
26  usernameVariant?: 'social' | 'token';
27  children?: React.ReactNode;
28}
29 
30export function UserInfo({
31  publicKey,
32  profile: profileProp,
33  pictureSize = 'md',
34  showVerification = true,
35  isVerified: isVerifiedProp = false,
36  showCopyButton = false,
37  truncate = false,
38  maxLength,
39  className,
40  usernameClassName,
41  layout = 'row',
42  gap = 'md',
43  showPublicKey = false,
44  usernameVariant = 'social',
45  children,
46}: UserInfoProps) {
47  const {
48    profile: fetchedProfile,
49    loading,
50    error,
51  } = useProfile(profileProp ? '' : publicKey);
52  const profile = profileProp || fetchedProfile;
53  const username = profile?.username;
54  const isLoading = !profileProp && loading;
55  const hasError = !profileProp && error;
56  const isVerified = profileProp?.isVerified || isVerifiedProp;
57 
58  const gapClasses = {
59    none: '',
60    sm: layout === 'row' ? 'gap-1' : 'gap-0.5',
61    md: layout === 'row' ? 'gap-2' : 'gap-1',
62    lg: layout === 'row' ? 'gap-3' : 'gap-1.5',
63  };
64 
65  const containerClasses = cn(
66    'flex items-center',
67    layout === 'column' && 'flex-col',
68    layout === 'row-reverse' && 'flex-row-reverse',
69    layout === 'column-reverse' && 'flex-col-reverse',
70    gapClasses[gap],
71    className
72  );
73 
74  const textContainerClasses = cn(
75    layout === 'column' && 'flex flex-col items-center text-center',
76    layout === 'row' && 'flex flex-col justify-center',
77    layout === 'row-reverse' && 'flex flex-col justify-end items-end',
78    layout === 'column-reverse' && 'flex flex-col justify-end items-end'
79  );
80 
81  // Loading state
82  if (isLoading) {
83    return (
84      <div className={containerClasses}>
85        <Skeleton
86          className={`rounded-full ${
87// … truncated