@windrun-huaiin/third-ui 5.11.4 → 5.11.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "5.11.4",
+  "version": "5.11.5",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/main/gallery.tsx

@@ -5,14 +5,22 @@ import { useTranslations } from 'next-intl'
 import Image from "next/image"
 import { GradientButton } from "@third-ui/fuma/mdx/gradient-button"
 import { cn } from '@lib/utils';
+import { useState } from 'react';
+
+interface GalleryItem {
+  url: string;
+  altMsg: string;
+}
 
 export function Gallery({ sectionClassName }: { sectionClassName?: string }) {
   const t = useTranslations('gallery');
-  const galleryItems = t.raw('prompts') as string[];
+  const galleryItems = t.raw('prompts') as GalleryItem[];
+  const defaultImgUrl = t.raw('defaultImgUrl') as string;
+  const [imageErrors, setImageErrors] = useState<Set<number>>(new Set());
 
-  const handleDownload = async (index: number) => {
+  const handleDownload = async (item: GalleryItem, index: number) => {
     try {
-      const response = await fetch(`/${index + 1}.webp`);
+      const response = await fetch(item.url);
       const blob = await response.blob();
       const url = window.URL.createObjectURL(blob);
       const a = document.createElement('a');
@@ -27,6 +35,14 @@ export function Gallery({ sectionClassName }: { sectionClassName?: string }) {
     }
   };
 
+  const handleImageError = (index: number) => {
+    setImageErrors(prev => new Set(prev).add(index));
+  };
+
+  const getImageSrc = (item: GalleryItem, index: number) => {
+    return imageErrors.has(index) ? defaultImgUrl : item.url;
+  };
+
   return (
     <section id="gallery" className={cn("container mx-auto px-4 py-20 scroll-mt-20", sectionClassName)}>
       <h2 className="text-3xl md:text-4xl font-bold text-center mb-6">
@@ -36,18 +52,19 @@ export function Gallery({ sectionClassName }: { sectionClassName?: string }) {
         {t('description')}
       </p>
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-        {galleryItems.map((_prompt, index) => (
+        {galleryItems.map((item, index) => (
           <div key={index} className="group relative overflow-hidden rounded-xl">
             <Image
-              src={`/${index + 1}.webp`}
-              alt="Reve Image AI-generated artwork"
+              src={getImageSrc(item, index)}
+              alt={item.altMsg}
               width={600}
               height={600}
               className="w-full h-80 object-cover transition duration-300 group-hover:scale-105"
+              onError={() => handleImageError(index)}
             />
             <div className="absolute inset-0 flex items-end justify-end p-4 opacity-0 group-hover:opacity-100 transition duration-300">
               <button
-                onClick={() => handleDownload(index)}
+                onClick={() => handleDownload(item, index)}
                 className="bg-black/50 hover:bg-black/70 p-2 rounded-full text-white/80 hover:text-white transition-all duration-300"
               >
                 <icons.Download className="h-5 w-5 text-white" />