feat(eventCard): add fallback width for eventCard (#199)

FurCoder · Aug 10, 2024 · 8f39f8b · 8f39f8b
1 parent e77e99a
commit 8f39f8b
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 1 deletion.
diff --git a/src/components/eventCard/index.tsx b/src/components/eventCard/index.tsx
@@ -16,9 +16,13 @@ let instancesCount = 0;
 export default function EventCard({
   event,
   sizes,
+  fallbackWidth,
+  fallbackHeight,
 }: {
   event: Event;
   sizes?: string;
+  fallbackWidth?: number;
+  fallbackHeight?: number;
 }) {
   const finalEventCoverImage = getEventCoverImgPath(event);
   const isDefaultCover = finalEventCoverImage.includes(
@@ -75,6 +79,8 @@ export default function EventCard({
               sizes={sizes}
               autoFormat
               priority={instancesCount <= 3}
+              fallbackHeight={fallbackHeight}
+              fallbackWidth={fallbackWidth}
             />
           )}
           <div className="z-10 top-0 relative">

diff --git a/src/components/image/index.tsx b/src/components/image/index.tsx
@@ -14,6 +14,8 @@ function Image({
   height,
   priority,
   autoFormat,
+  fallbackWidth,
+  fallbackHeight,
 }: {
   id?: string;
   src: string;
@@ -25,10 +27,17 @@ function Image({
   quality?: number;
   width?: number;
   height?: number;
+  fallbackWidth?: number;
+  fallbackHeight?: number;
   priority?: boolean;
   autoFormat?: boolean;
 }) {
-  const srcString = imageLoader({ src, quality, width, height });
+  const srcString = imageLoader({
+    src,
+    quality,
+    width: width || fallbackWidth,
+    height: height || fallbackHeight,
+  });
 
   return (
     <picture className={containerClassName}>

diff --git a/src/pages/[organization]/index.tsx b/src/pages/[organization]/index.tsx
@@ -234,6 +234,7 @@ export default function OrganizationDetail(props: {
                 key={e.id}
                 event={e}
                 sizes="(max-width: 750px)750px, (max-width: 1080px) 1080px, (min-width: 1200px) 1200px, 1200px"
+                fallbackWidth={1200}
               />
             ))}
           </div>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -108,6 +108,7 @@ function DurationSection({
                 key={event.name}
                 event={event}
                 sizes="(max-width: 750px) 650px, (max-width: 1080px) 552px, 552px"
+                fallbackWidth={650}
               />
             ))}
           </div>