From b9c93b6ec3c35b852271aec9d33e182048f09fed Mon Sep 17 00:00:00 2001
From: stakbucks <dhassidu11@gmail.com>
Date: Fri, 23 Aug 2024 21:31:51 +0900
Subject: [PATCH] feat: blur profile image

---
 .../src/components/avatar/avatarStyle.css.ts  | 22 +++++++++++++++++++
 apps/bottle/src/components/avatar/index.tsx   | 16 +++++++++-----
 .../user-information/BasicInformationArea.tsx |  2 +-
 3 files changed, 33 insertions(+), 7 deletions(-)
 create mode 100644 apps/bottle/src/components/avatar/avatarStyle.css.ts

diff --git a/apps/bottle/src/components/avatar/avatarStyle.css.ts b/apps/bottle/src/components/avatar/avatarStyle.css.ts
new file mode 100644
index 0000000..0ffcc1f
--- /dev/null
+++ b/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,
+});
diff --git a/apps/bottle/src/components/avatar/index.tsx b/apps/bottle/src/components/avatar/index.tsx
index bed49cf..a3d9cce 100644
--- a/apps/bottle/src/components/avatar/index.tsx
+++ b/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} />;
+}
diff --git a/apps/bottle/src/components/user-information/BasicInformationArea.tsx b/apps/bottle/src/components/user-information/BasicInformationArea.tsx
index 744a70f..4eb9baa 100644
--- a/apps/bottle/src/components/user-information/BasicInformationArea.tsx
+++ b/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}