reend-components 1.2.1 → 1.2.2

package/dist/lib/index.mjs

@@ -470,37 +470,43 @@ const Ft = s.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
 ));
 Ft.displayName = "CardFooter";
 const zt = s.forwardRef(
-  ({ name: t, faction: r, rarity: a = 5, imageSrc: o, imageAlt: n, selected: i, className: c, ...d }, p) => /* @__PURE__ */ u(
-    "div",
-    {
-      ref: p,
-      className: l(
-        "relative bg-surface-1 border border-border transition-all duration-300 w-[120px] sm:w-[140px] shrink-0 cursor-pointer",
-        "hover:-translate-y-1 hover:shadow-[0_16px_48px_rgba(0,0,0,0.5)] hover:border-primary/20",
-        i && "border-2 border-primary/40 bg-primary/[0.06]",
-        c
-      ),
-      ...d,
-      children: [
-        /* @__PURE__ */ e("div", { className: "clip-corner-sm aspect-[3/4] bg-surface-2 overflow-hidden", children: o ? /* @__PURE__ */ e(
-          "img",
-          {
-            src: o,
-            alt: n ?? t,
-            className: "w-full h-full object-cover"
-          }
-        ) : /* @__PURE__ */ e("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-primary/20 text-4xl", children: "◆" }) }) }),
-        /* @__PURE__ */ e("div", { className: "px-2 pt-1.5 pb-0", children: /* @__PURE__ */ u("span", { className: "text-[10px] text-primary tracking-wider", children: [
-          "◆".repeat(a),
-          "◇".repeat(6 - a)
-        ] }) }),
-        /* @__PURE__ */ u("div", { className: "px-2 pb-2", children: [
-          /* @__PURE__ */ e("p", { className: "font-display text-[13px] font-semibold uppercase text-foreground leading-tight truncate", children: t }),
-          r && /* @__PURE__ */ e("p", { className: "font-mono text-[10px] text-muted-foreground truncate", children: r })
-        ] })
-      ]
-    }
-  )
+  ({ name: t, faction: r, rarity: a = 5, imageSrc: o, imageAlt: n, selected: i, className: c, ...d }, p) => {
+    const [b, f] = s.useState(!1);
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        ref: p,
+        className: l(
+          "relative bg-surface-1 border border-border transition-all duration-300 w-[120px] sm:w-[140px] shrink-0 cursor-pointer",
+          "hover:-translate-y-1 hover:shadow-[0_16px_48px_rgba(0,0,0,0.5)] hover:border-primary/20",
+          i && "border-2 border-primary/40 bg-primary/[0.06]",
+          c
+        ),
+        ...d,
+        children: [
+          /* @__PURE__ */ e("div", { className: "clip-corner-sm aspect-[3/4] bg-surface-2 overflow-hidden", children: o && !b ? /* @__PURE__ */ e(
+            "img",
+            {
+              src: o,
+              alt: n ?? t,
+              loading: "lazy",
+              decoding: "async",
+              onError: () => f(!0),
+              className: "w-full h-full object-cover"
+            }
+          ) : /* @__PURE__ */ e("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-primary/20 text-4xl", children: "◆" }) }) }),
+          /* @__PURE__ */ e("div", { className: "px-2 pt-1.5 pb-0", children: /* @__PURE__ */ u("span", { className: "text-[10px] text-primary tracking-wider", children: [
+            "◆".repeat(a),
+            "◇".repeat(6 - a)
+          ] }) }),
+          /* @__PURE__ */ u("div", { className: "px-2 pb-2", children: [
+            /* @__PURE__ */ e("p", { className: "font-display text-[13px] font-semibold uppercase text-foreground leading-tight truncate", children: t }),
+            r && /* @__PURE__ */ e("p", { className: "font-mono text-[10px] text-muted-foreground truncate", children: r })
+          ] })
+        ]
+      }
+    );
+  }
 );
 zt.displayName = "OperatorCard";
 const Ht = s.forwardRef(
@@ -5992,6 +5998,7 @@ function Ae({
   initials: a,
   sizeClass: o
 }) {
+  const [n, i] = s.useState(!1);
   return /* @__PURE__ */ e(
     "div",
     {
@@ -6003,13 +6010,14 @@ function Ae({
       style: {
         clipPath: "polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%)"
       },
-      children: t ? /* @__PURE__ */ e(
+      children: t && !n ? /* @__PURE__ */ e(
         "img",
         {
           src: t,
           alt: r,
           loading: "lazy",
           decoding: "async",
+          onError: () => i(!0),
           className: "w-full h-full object-cover"
         }
       ) : /* @__PURE__ */ e("span", { children: a ?? r.slice(0, 2) })