From d0f8efbe54e54ea7a53494a14f98b660306d4322 Mon Sep 17 00:00:00 2001
From: stakbucks <dhassidu11@gmail.com>
Date: Mon, 26 Aug 2024 21:30:59 +0900
Subject: [PATCH] fix: wrap avatar with container

---
 .../src/components/avatar/avatarStyle.css.ts   | 18 ++++++++++++++++++
 apps/bottle/src/components/avatar/index.tsx    |  6 +++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/apps/bottle/src/components/avatar/avatarStyle.css.ts b/apps/bottle/src/components/avatar/avatarStyle.css.ts
index 0ffcc1f..523653d 100644
--- a/apps/bottle/src/components/avatar/avatarStyle.css.ts
+++ b/apps/bottle/src/components/avatar/avatarStyle.css.ts
@@ -2,6 +2,24 @@ import { colors } from '@bottlesteam/ui';
 import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
+export const containerStyle = recipe({
+  base: {
+    borderRadius: '50%',
+  },
+  variants: {
+    size: {
+      sm: {
+        width: '48px',
+        height: '48px',
+      },
+      lg: {
+        width: '80px',
+        height: '80px',
+      },
+    },
+  },
+});
+
 export const avatarStyle = recipe({
   base: {
     borderRadius: '50%',
diff --git a/apps/bottle/src/components/avatar/index.tsx b/apps/bottle/src/components/avatar/index.tsx
index bbfe6b9..4ce4001 100644
--- a/apps/bottle/src/components/avatar/index.tsx
+++ b/apps/bottle/src/components/avatar/index.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image';
 import type { ImageProps } from 'next/image';
-import { avatarStyle, placeholderStyle } from './avatarStyle.css';
+import { avatarStyle, containerStyle, placeholderStyle } from './avatarStyle.css';
 
 export interface AvatarProps extends Omit<ImageProps, 'alt' | 'width' | 'height'> {
   size: 'sm' | 'lg';
@@ -11,7 +11,7 @@ export function Avatar({ size: _size, blur, ...props }: AvatarProps) {
   const size = _size === 'sm' ? 48 : 80;
 
   return (
-    <>
+    <div className={containerStyle({ size: _size })}>
       {props.src != null ? (
         <Image
           priority
@@ -24,7 +24,7 @@ export function Avatar({ size: _size, blur, ...props }: AvatarProps) {
       ) : (
         <Placeholder size={size} />
       )}
-    </>
+    </div>
   );
 }