...

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}