karusell

src/components/ImageGalleryX.tsx

@@ -0,0 +1,35 @@
+import React, { useCallback, useMemo } from "react";
+import ImageGallery, { ReactImageGalleryItem } from "react-image-gallery";
+import "react-image-gallery/styles/css/image-gallery.css";
+import { imageGalleryItems } from "../state";
+
+
+export default function ImageGalleryX() 
+{
+  const root: string = process.env.REACT_APP_WWW_ROOT!;
+  const uploads: string = root + 'uploads/';
+
+  const items = useMemo(() => 
+  {
+    return imageGalleryItems.map((item: ReactImageGalleryItem) => 
+    {
+      const newItem = { ...item };
+      newItem.original = uploads + newItem.original;
+      newItem.thumbnail = uploads + newItem.thumbnail;
+//      newItem.thumbnailClass = {''}
+      return newItem;
+    });
+  }, []);
+
+  return (
+    <div className={''}>
+      <ImageGallery
+        items={items}
+        showFullscreenButton={true}
+        showThumbnails={true}
+        showBullets={true}
+        showIndex={true}
+      />
+    </div>
+  );
+}