F(frontend): add image lightbox and derivative fallbacks

src/views/Events.tsx

@@ -8,8 +8,9 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
+import ProgressiveImage from "@/components/ProgressiveImage";
 import type * as Types from "@/lib/types";
-import { formatJalali, formatNumberPersian, formatToman, getThumbUrl } from "@/lib/utils";
+import { formatJalali, formatNumberPersian, formatToman, getEventCardImageUrl } from "@/lib/utils";
 import { siteUrl } from "@/lib/site";
 
 type EventsProps = {
@@ -73,7 +74,7 @@ export default function Events({
 
   const ogImage = useMemo(() => {
     if (!events.length) return `${siteUrl}/favicon.ico`;
-    return toAbsoluteUrl(getThumbUrl(events[0])) ?? `${siteUrl}/favicon.ico`;
+    return toAbsoluteUrl(getEventCardImageUrl(events[0])) ?? `${siteUrl}/favicon.ico`;
   }, [events]);
 
   const listStructuredData = useMemo(() => {
@@ -93,7 +94,7 @@ export default function Events({
         listItem.endDate = eventItem.end_time;
       }
 
-      const imageUrl = toAbsoluteUrl(getThumbUrl(eventItem));
+      const imageUrl = toAbsoluteUrl(getEventCardImageUrl(eventItem));
       if (imageUrl) {
         listItem.image = imageUrl;
       }
@@ -210,12 +211,11 @@ export default function Events({
                 <Link key={event.id} to={`/events/${event.slug}`} className="block h-full">
                   <Card className="h-full flex flex-col hover:shadow-lg transition-shadow">
                     <div className="w-full aspect-video overflow-hidden rounded-lg">
-                      <img
-                        src={getThumbUrl(event)}
+                      <ProgressiveImage
+                        src={getEventCardImageUrl(event)}
                         alt={event.title}
-                        className="w-full h-full object-cover"
-                        loading="lazy"
-                        decoding="async"
+                        wrapperClassName="h-full w-full"
+                        className="h-full w-full object-cover"
                       />
                     </div>