diff options
| -rw-r--r-- | FrontEnd/src/app/views/common/user/UserAvatar.tsx | 18 | ||||
| -rw-r--r-- | FrontEnd/src/app/views/search/index.tsx | 9 |
2 files changed, 21 insertions, 6 deletions
diff --git a/FrontEnd/src/app/views/common/user/UserAvatar.tsx b/FrontEnd/src/app/views/common/user/UserAvatar.tsx new file mode 100644 index 00000000..73273298 --- /dev/null +++ b/FrontEnd/src/app/views/common/user/UserAvatar.tsx @@ -0,0 +1,18 @@ +import React from "react"; + +import { useAvatar } from "@/services/user"; + +import BlobImage from "../BlobImage"; + +export interface UserAvatarProps + extends React.ImgHTMLAttributes<HTMLImageElement> { + username: string; +} + +const UserAvatar: React.FC<UserAvatarProps> = ({ username, ...otherProps }) => { + const avatar = useAvatar(username); + + return <BlobImage blob={avatar} {...otherProps} />; +}; + +export default UserAvatar; diff --git a/FrontEnd/src/app/views/search/index.tsx b/FrontEnd/src/app/views/search/index.tsx index 7d11d899..8aff5f01 100644 --- a/FrontEnd/src/app/views/search/index.tsx +++ b/FrontEnd/src/app/views/search/index.tsx @@ -7,10 +7,9 @@ import { HttpNetworkError } from "@/http/common"; import { getHttpSearchClient } from "@/http/search"; import { TimelineInfo } from "@/services/timeline"; -import { useAvatar } from "@/services/user"; import SearchInput from "../common/SearchInput"; -import BlobImage from "../common/BlobImage"; +import UserAvatar from "../common/user/UserAvatar"; const TimelineSearchResultItemView: React.FC<{ timeline: TimelineInfo }> = ({ timeline, @@ -19,8 +18,6 @@ const TimelineSearchResultItemView: React.FC<{ timeline: TimelineInfo }> = ({ ? `users/${timeline.owner.username}` : `timelines/${timeline.name}`; - const avatar = useAvatar(timeline.owner.username); - return ( <div className="timeline-search-result-item my-2 p-3"> <h4> @@ -30,8 +27,8 @@ const TimelineSearchResultItemView: React.FC<{ timeline: TimelineInfo }> = ({ </Link> </h4> <div> - <BlobImage - blob={avatar} + <UserAvatar + username={timeline.owner.username} className="timeline-search-result-item-avatar mr-2" /> {timeline.owner.nickname} |