fix: blur avatar on bottles page (#50)

Nexters · Aug 23, 2024 · 7d7fe93 · 7d7fe93
1 parent e8287cf
commit 7d7fe93
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/apps/bottle/src/app/bottles/_components/BottlesListItem.tsx b/apps/bottle/src/app/bottles/_components/BottlesListItem.tsx
@@ -1,7 +1,7 @@
+import { Avatar } from '@/components/avatar';
 import { getTimeDifference } from '@/features/time/getTimeDifference';
 import { PreviewBottle } from '@/models/bottle';
 import { Paragraph, spacings, Asset } from '@bottlesteam/ui';
-import Image from 'next/image';
 import { itemStyle, timeLabelStyle, userInfoContainerStyle, userInfoStyle } from './bottlesListStyle.css';
 
 interface Props {
@@ -33,14 +33,7 @@ export function BottlesListItem({ bottle }: Props) {
             <span>{stringifyKeywords(bottle.keyword)}</span>
           </Paragraph>
         </div>
-        <Image
-          src={bottle.userImageUrl}
-          alt="user-profile"
-          priority
-          width={48}
-          height={48}
-          style={{ borderRadius: '50%' }}
-        />
+        <Avatar src={bottle.userImageUrl} size="sm" blur />
       </div>
     </li>
   );

diff --git a/apps/bottle/src/components/avatar/index.tsx b/apps/bottle/src/components/avatar/index.tsx
@@ -13,7 +13,14 @@ export function Avatar({ size: _size, blur, ...props }: AvatarProps) {
   return (
     <>
       {props.src != null ? (
-        <Image {...props} alt="user profile image" width={size} height={size} className={avatarStyle({ blur })} />
+        <Image
+          priority
+          {...props}
+          alt="user profile image"
+          width={size}
+          height={size}
+          className={avatarStyle({ blur })}
+        />
       ) : (
         <Placeholder size={size} />
       )}