konnosDashboard
UserHeader.tsx62 lines · main
1import { Copy } from 'lucide-react'
2import { cn } from 'ui'
3
4import { PANEL_PADDING } from './Users.constants'
5import { getDisplayName } from './Users.utils'
6import CopyButton from '@/components/ui/CopyButton'
7import { User } from '@/data/auth/users-infinite-query'
8
9export const UserHeader = ({ user }: { user: User }) => {
10 const displayName = getDisplayName(user)
11 const hasDisplayName = displayName !== '-'
12
13 const isPhoneAuth = user.phone !== null
14 const isAnonUser = user.is_anonymous
15
16 return (
17 <div className={cn(PANEL_PADDING)}>
18 {isPhoneAuth ? (
19 <div className="flex items-center gap-x-1">
20 <p>{user.phone}</p>
21 <CopyButton
22 iconOnly
23 type="text"
24 icon={<Copy />}
25 className="px-1"
26 text={user?.phone ?? ''}
27 />
28 </div>
29 ) : isAnonUser ? (
30 <>
31 <p>Anonymous user</p>
32 <div className="flex items-center gap-x-1">
33 <p className="text-foreground-light text-sm">{user.id}</p>
34 <CopyButton
35 iconOnly
36 type="text"
37 icon={<Copy />}
38 className="px-1"
39 text={user?.id ?? ''}
40 />
41 </div>
42 </>
43 ) : (
44 <>
45 {hasDisplayName && <p>{displayName}</p>}
46 <div className="flex items-center gap-x-1">
47 <p className={cn(hasDisplayName ? 'text-foreground-light text-sm' : 'text-foreground')}>
48 {user.email}
49 </p>
50 <CopyButton
51 iconOnly
52 type="text"
53 icon={<Copy />}
54 className="px-1"
55 text={user?.email ?? ''}
56 />
57 </div>
58 </>
59 )}
60 </div>
61 )
62}