feat: blur profile image

apps/bottle/src/components/avatar/avatarStyle.css.ts

@@ -0,0 +1,22 @@
+import { colors } from '@bottlesteam/ui';
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+export const avatarStyle = recipe({
+  base: {
+    borderRadius: '50%',
+  },
+  variants: {
+    blur: {
+      true: {
+        filter: 'blur(2px)',
+      },
+      false: {},
+    },
+  },
+});
+
+export const placeholderStyle = style({
+  borderRadius: '50%',
+  backgroundColor: colors.neutral200,
+});

apps/bottle/src/components/avatar/index.tsx

@@ -1,22 +1,26 @@
-import { colors } from '@bottlesteam/ui';
 import Image from 'next/image';
 import type { ImageProps } from 'next/image';
+import { avatarStyle, placeholderStyle } from './avatarStyle.css';
 
 export interface AvatarProps extends Omit<ImageProps, 'alt' | 'width' | 'height'> {
   size: 'sm' | 'lg';
+  blur?: boolean;
 }
 
-export function Avatar({ size: _size, ...props }: AvatarProps) {
+export function Avatar({ size: _size, blur, ...props }: AvatarProps) {
   const size = _size === 'sm' ? 48 : 80;
+
   return (
     <>
       {props.src != null ? (
-        <Image {...props} alt="user profile image" width={size} height={size} style={{ borderRadius: '50%' }} />
+        <Image {...props} alt="user profile image" width={size} height={size} className={avatarStyle({ blur })} />
       ) : (
-        <div
-          style={{ width: `${size}px`, height: `${size}px`, borderRadius: '50%', backgroundColor: colors.neutral200 }}
-        />
+        <Placeholder size={size} />
       )}
     </>
   );
 }
+
+function Placeholder({ size }: { size: number }) {
+  return <div style={{ width: `${size}px`, height: `${size}px` }} className={placeholderStyle} />;
+}

apps/bottle/src/components/user-information/BasicInformationArea.tsx

@@ -16,7 +16,7 @@ export function BasicInformationArea(props: Props) {
   return (
     <section className={basicInformationAreaStyle}>
       {props.likeMessage && <Bubble style={{ marginBottom: spacings.sm }}>{props.likeMessage}</Bubble>}
-      <Avatar src={isCurrentUser(props) ? props.imageUrl : props.userImageUrl} size="lg" />
+      <Avatar blur src={isCurrentUser(props) ? props.imageUrl : props.userImageUrl} size="lg" />
       <div className={nameAndAgeContainerStyle}>
         <Paragraph typography="st1" color="neutral900">
           {props.userName}