feat(share): display muliple images (#28)

* fix(workflows): user can click multiple times on run even while loading * feat(share): display muliple images
2024-02-17 13:32:56 +08:00
parent 17653508c5
commit 2cfad8bef6
3 changed files with 70 additions and 25 deletions
@@ -0,0 +1,42 @@
+type imagesType = {
+  url: string;
+  width?: number;
+  height?: number;
+};
+type VisualizeImagesGridProps = {
+  images: imagesType[];
+  layout?: 'justify-between' | 'justify-center' | 'justify-start' | 'justify-end';
+};
+export function VisualizeImagesGrid({ images, layout }: VisualizeImagesGridProps) {
+
+  return (
+    <div className={`flex gap-4 flex-wrap ${layout || 'justify-center'}`}>
+      <>
+        {images && images.length > 0 &&
+          images.map(item => {
+            if (!item) {
+              return;
+            }
+            if (item?.url.endsWith(".mp4") || item?.url.endsWith(".webm")) {
+              return (
+                <video key={item?.url} controls autoPlay className="rounded-xl" style={{ maxHeight: item.height || 370, maxWidth: item.width || "auto" }}>
+                  <source src={item?.url} type="video/mp4" />
+                  <source src={item?.url} type="video/webm" />
+                  Your browser does not support the video tag.
+                </video>
+              );
+            }
+            return <img
+              key={item?.url}
+              className="object-contain overflow-hidden rounded-xl"
+              src={item?.url}
+              alt="Generated image"
+              style={{ maxHeight: item.height || 370, maxWidth: item.width || "auto" }}
+            />;
+          })
+        }
+      </>
+    </div>
+  );
+
+}