fix: wrap avatar with container

Nexters · Aug 26, 2024 · d0f8efb · d0f8efb
1 parent a225564
commit d0f8efb
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git 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
@@ -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>
   );
 }