fix(ui): improve avatar and masonry item styling

- Add full width to SayMasonry item for consistent layout - Dynamically apply border radius to Avatar component - Refactor React import in Avatar component Signed-off-by: Innei <[email protected]>
Innei · Feb 4, 2025 · f7806d1 · f7806d1
1 parent 0400d81
commit f7806d1
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 21 deletions.
diff --git a/src/components/modules/say/SayMasonry.tsx b/src/components/modules/say/SayMasonry.tsx
@@ -99,7 +99,7 @@ const Item = memo<{
   const present = useSayModal()
 
   return (
-    <BottomToUpTransitionView delay={i * 50} key={say.id}>
+    <BottomToUpTransitionView className="w-full" delay={i * 50} key={say.id}>
       <m.blockquote
         layout
         key={say.id}

diff --git a/src/components/ui/avatar/Avatar.tsx b/src/components/ui/avatar/Avatar.tsx
@@ -1,7 +1,9 @@
 'use client'
 
+import * as RadixAvatar from '@radix-ui/react-avatar'
 import type { DetailedHTMLProps, FC, ImgHTMLAttributes, JSX } from 'react'
-import React, { createElement, useMemo, useRef, useState } from 'react'
+import * as React from 'react'
+import { createElement, useMemo, useRef, useState } from 'react'
 
 import { useIsDark } from '~/hooks/common/use-is-dark'
 import { getColorScheme, stringToHue } from '~/lib/color'
@@ -95,25 +97,42 @@ export const Avatar: FC<
               className,
             )}
           >
-            <img
-              src={imageUrl}
-              style={{
-                opacity: loaded ? 1 : 0,
-                ...(radius
-                  ? { borderRadius: radius === 'full' ? '100%' : `${radius}px` }
-                  : undefined),
-              }}
-              height={size}
-              width={size}
-              onLoad={() => setLoaded(true)}
-              onError={() => setLoadError(true)}
-              loading={lazy ? 'lazy' : 'eager'}
-              {...imageProps}
-              className={clsxm(
-                'aspect-square duration-200',
-                imageProps.className,
-              )}
-            />
+            <RadixAvatar.Root>
+              <RadixAvatar.Image
+                src={imageUrl}
+                style={{
+                  opacity: loaded ? 1 : 0,
+                  ...(radius
+                    ? {
+                        borderRadius:
+                          radius === 'full' ? '100%' : `${radius}px`,
+                      }
+                    : undefined),
+                }}
+                height={size}
+                width={size}
+                onLoad={() => setLoaded(true)}
+                onError={() => setLoadError(true)}
+                loading={lazy ? 'lazy' : 'eager'}
+                {...imageProps}
+                className={clsxm(
+                  'aspect-square duration-200',
+                  imageProps.className,
+                )}
+              />
+              <RadixAvatar.Fallback
+                delayMs={600}
+                style={{
+                  height: `${size}px`,
+                  width: `${size}px`,
+                  borderRadius: radius === 'full' ? '100%' : `${radius}px`,
+                }}
+                className={clsxm(
+                  'size-full block shrink-0',
+                  imageProps.className,
+                )}
+              />
+            </RadixAvatar.Root>
           </div>
         ) : text ? (
           <div className="relative flex size-full grow select-none items-center justify-center">