@@ -3,6 +3,8 @@ import { LuMapPin, LuMail, LuGlobe, LuTwitter, LuGithub, LuMessageSquare, LuSend
3
3
import { ChainIcon } from './ChainIcon' ;
4
4
import { getChainIconUrl } from '../utils/chainIcons' ;
5
5
import { useFollowers } from '../hooks/useFollowers' ;
6
+ import { ProfileSearchResult } from '@/hooks/useSearch' ;
7
+ import { useProfile } from '@/hooks/useProfile' ;
6
8
7
9
interface Profile {
8
10
name : string ;
@@ -26,11 +28,12 @@ interface Profile {
26
28
}
27
29
28
30
interface SearchResultProps {
29
- profile : Profile ;
31
+ profile : ProfileSearchResult ;
30
32
}
31
33
32
34
export function SearchResult ( { profile } : SearchResultProps ) {
33
35
const { data : followersData } = useFollowers ( profile . name ) ;
36
+ const { data : profileData } = useProfile ( profile . name ) ;
34
37
35
38
return (
36
39
< div className = "bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all duration-200" >
@@ -41,11 +44,11 @@ export function SearchResult({ profile }: SearchResultProps) {
41
44
>
42
45
< div className = "relative h-full flex flex-col" >
43
46
{ /* Header/Banner image */ }
44
- { profile . header || profile . records ?. header ? (
47
+ { profileData ? .header || profileData ? .records ?. header ? (
45
48
< div className = "w-full aspect-[3/1] overflow-hidden" >
46
49
< img
47
- src = { profile . header || profile . records ?. header }
48
- alt = { `${ profile . display } banner` }
50
+ src = { profileData . header || profileData . records ?. header }
51
+ alt = { `${ profileData . display } banner` }
49
52
className = "w-full h-full object-cover"
50
53
/>
51
54
</ div >
@@ -57,38 +60,38 @@ export function SearchResult({ profile }: SearchResultProps) {
57
60
< div className = "p-2 flex-1" >
58
61
< div className = "flex items-start space-x-2 pr-2 pb-1 h-full" >
59
62
{ /* Avatar */ }
60
- < div className = { `${ profile . header || profile . records ?. header ? '-mt-7' : '' } flex-shrink-0` } >
61
- { profile . avatar ? (
63
+ < div className = { `${ profileData ? .header || profileData ? .records ?. header ? '-mt-7' : '' } flex-shrink-0` } >
64
+ { profileData ? .avatar ? (
62
65
< img
63
- src = { profile . avatar }
64
- alt = { profile . display }
66
+ src = { profileData . avatar }
67
+ alt = { profileData . display }
65
68
className = "h-14 w-14 rounded-full border-2 border-white shadow-md object-cover"
66
69
/>
67
70
) : (
68
71
< div className = "h-14 w-14 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-xl font-bold" >
69
- { profile . display . charAt ( 0 ) . toUpperCase ( ) }
72
+ { profileData ? .display ? .charAt ( 0 ) . toUpperCase ( ) }
70
73
</ div >
71
74
) }
72
75
</ div >
73
76
74
77
{ /* Profile details */ }
75
78
< div className = "flex-1 min-w-0 h-full flex flex-col" >
76
79
< h3 className = "text-base font-semibold text-blue-600 truncate" >
77
- { profile . display }
80
+ { profileData ? .display }
78
81
</ h3 >
79
- { profile . address && (
82
+ { profileData ? .address && (
80
83
< p className = "text-xs text-gray-500 truncate" >
81
- { profile . address }
84
+ { profileData . address }
82
85
</ p >
83
86
) }
84
87
< p className = "mt-1 text-xs text-gray-600 whitespace-pre-line line-clamp-2" >
85
- { profile . records ?. description || '' }
88
+ { profileData ? .records ?. description || '' }
86
89
</ p >
87
90
88
91
{ /* Chain addresses */ }
89
- { profile . chains && Object . keys ( profile . chains ) . length > 0 && (
92
+ { profileData ? .chains && Object . keys ( profileData . chains ) . length > 0 && (
90
93
< div className = "mt-1.5 flex flex-wrap gap-x-2 gap-y-1" >
91
- { Object . entries ( profile . chains ) . map ( ( [ chain , address ] ) => (
94
+ { Object . entries ( profileData . chains ) . map ( ( [ chain , address ] ) => (
92
95
< div key = { chain } className = "flex items-center text-xs text-gray-500" title = { `${ chain . toUpperCase ( ) } : ${ address } ` } >
93
96
< ChainIcon
94
97
chain = { chain }
@@ -103,47 +106,47 @@ export function SearchResult({ profile }: SearchResultProps) {
103
106
104
107
{ /* Profile metadata */ }
105
108
< div className = "mt-1.5 flex flex-wrap gap-x-3 gap-y-1 text-xs text-gray-500" >
106
- { profile . records ?. location && (
109
+ { profileData ? .records ?. location && (
107
110
< div className = "flex items-center" >
108
111
< LuMapPin className = "mr-1 h-4 w-4" />
109
- < span > { profile . records . location } </ span >
112
+ < span > { profileData . records . location } </ span >
110
113
</ div >
111
114
) }
112
- { profile . records ?. email && (
115
+ { profileData ? .records ?. email && (
113
116
< div className = "flex items-center" >
114
117
< LuMail className = "mr-1 h-4 w-4" />
115
- < span > { profile . records . email } </ span >
118
+ < span > { profileData . records . email } </ span >
116
119
</ div >
117
120
) }
118
- { profile . records ?. url && (
121
+ { profileData ? .records ?. url && (
119
122
< div className = "flex items-center" >
120
123
< LuGlobe className = "mr-1 h-4 w-4" />
121
- < span > { profile . records . url } </ span >
124
+ < span > { profileData . records . url } </ span >
122
125
</ div >
123
126
) }
124
127
</ div >
125
128
126
129
{ /* Social links and followers */ }
127
130
< div className = "mt-1.5 flex justify-between items-center flex-1" >
128
131
< div className = "flex space-x-2" >
129
- { profile . records ?. [ 'com.twitter' ] && (
132
+ { profileData ? .records ?. [ 'com.twitter' ] && (
130
133
< div className = "text-blue-400 hover:text-blue-600" >
131
- < LuTwitter className = "h-4 w-4" title = { `Twitter: ${ profile . records [ 'com.twitter' ] } ` } />
134
+ < LuTwitter className = "h-4 w-4" title = { `Twitter: ${ profileData . records [ 'com.twitter' ] } ` } />
132
135
</ div >
133
136
) }
134
- { profile . records ?. [ 'com.github' ] && (
137
+ { profileData ? .records ?. [ 'com.github' ] && (
135
138
< div className = "text-gray-700 hover:text-gray-900" >
136
- < LuGithub className = "h-4 w-4" title = { `GitHub: ${ profile . records [ 'com.github' ] } ` } />
139
+ < LuGithub className = "h-4 w-4" title = { `GitHub: ${ profileData . records [ 'com.github' ] } ` } />
137
140
</ div >
138
141
) }
139
- { profile . records ?. [ 'com.discord' ] && (
142
+ { profileData ? .records ?. [ 'com.discord' ] && (
140
143
< div className = "text-indigo-500 hover:text-indigo-700" >
141
- < LuMessageSquare className = "h-4 w-4" title = { `Discord: ${ profile . records [ 'com.discord' ] } ` } />
144
+ < LuMessageSquare className = "h-4 w-4" title = { `Discord: ${ profileData . records [ 'com.discord' ] } ` } />
142
145
</ div >
143
146
) }
144
- { profile . records ?. [ 'org.telegram' ] && (
147
+ { profileData ? .records ?. [ 'org.telegram' ] && (
145
148
< div className = "text-blue-500 hover:text-blue-700" >
146
- < LuSend className = "h-4 w-4" title = { `Telegram: ${ profile . records [ 'org.telegram' ] } ` } />
149
+ < LuSend className = "h-4 w-4" title = { `Telegram: ${ profileData . records [ 'org.telegram' ] } ` } />
147
150
</ div >
148
151
) }
149
152
</ div >
0 commit comments