Avatar supports src prop

noya-app · Jan 25, 2024 · 2799f2a · 2799f2a
1 parent a19e406
commit 2799f2a
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 18 deletions.
diff --git a/packages/noya-component/src/primitiveElements.tsx b/packages/noya-component/src/primitiveElements.tsx
@@ -45,7 +45,12 @@ export const primitiveElements: PrimitiveElementMetadata[] = [
     name: 'Avatar',
     description: 'A user avatar',
     icon: <AvatarIcon />,
-    schema: { children: 'none' },
+    schema: {
+      children: 'none',
+      props: {
+        src: 'image',
+      },
+    },
     initialValue: () =>
       Model.primitiveElement({
         name: 'Avatar',

diff --git a/packages/noya-component/src/renderResolvedNode.tsx b/packages/noya-component/src/renderResolvedNode.tsx
@@ -297,7 +297,8 @@ export function renderResolvedNode({
                 ? placeholderProp.value
                 : undefined,
           })}
-          {...(element.componentID === component.id.Image && {
+          {...((element.componentID === component.id.Image ||
+            element.componentID === component.id.Avatar) && {
             // src: 'https://placehold.it/300x300',
             // src: 'https://picsum.photos/300/300',
             src:

diff --git a/packages/noya-module-loader/src/VanillaDesignSystem.tsx b/packages/noya-module-loader/src/VanillaDesignSystem.tsx
@@ -283,28 +283,42 @@ const proxyObject = new Proxy(
 
       const stylingProps = createStylingProps(props, [
         `rounded-full`,
-        `flex`,
-        `items-center`,
-        `justify-center`,
         'overflow-hidden',
+        ...(!props.src
+          ? [
+              `flex`,
+              `items-center`,
+              `justify-center`,
+              `text-${colorMode === 'light' ? 'gray-300' : 'gray-600'}`,
+            ]
+          : []),
         `bg-${colorMode === 'light' ? 'gray-100' : 'gray-800'}`,
-        `text-${colorMode === 'light' ? 'gray-300' : 'gray-600'}`,
+      ]);
+
+      const imageStylingProps = createStylingProps(props, [
+        `w-full`,
+        `h-full`,
+        `object-cover`,
       ]);
 
       return (
         <div {...applyCommonProps({ ...props, ...stylingProps })}>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-            className="relative w-full h-full translate-y-[12.5%]"
-          >
-            <path
-              fillRule="evenodd"
-              d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z"
-              clipRule="evenodd"
-            />
-          </svg>
+          {props.src ? (
+            <img src={props.src} {...applyCommonProps(imageStylingProps)} />
+          ) : (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              className="relative w-full h-full translate-y-[12.5%]"
+            >
+              <path
+                fillRule="evenodd"
+                d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z"
+                clipRule="evenodd"
+              />
+            </svg>
+          )}
         </div>
       );
     },