implemented gallery widget

package-lock.json

@@ -22,6 +22,7 @@
         "react-leaflet": "^4.2.1",
         "react-leaflet-cluster": "^2.1.0",
         "react-markdown": "^9.0.1",
+        "react-photo-album": "^3.0.2",
         "react-router-dom": "^6.16.0",
         "react-string-replace": "^1.1.1",
         "react-toastify": "^9.1.3",
@@ -6043,6 +6044,23 @@
         "react": ">=18"
       }
     },
+    "node_modules/react-photo-album": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/react-photo-album/-/react-photo-album-3.0.2.tgz",
+      "integrity": "sha512-w3+8i6aj9l1jRfcubgVbAlBGSdtiXcqWdcwZcH4/Bavc+v7X7h+S3TkQ723pvDABjhaaxS168g9ECEBP6xnKrQ==",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18",
+        "react": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-router": {
       "version": "6.16.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.16.0.tgz",

package.json

@@ -68,6 +68,7 @@
     "react-leaflet": "^4.2.1",
     "react-leaflet-cluster": "^2.1.0",
     "react-markdown": "^9.0.1",
+    "react-photo-album": "^3.0.2",
     "react-router-dom": "^6.16.0",
     "react-string-replace": "^1.1.1",
     "react-toastify": "^9.1.3",

src/Components/AppShell/NavBar.tsx

@@ -62,7 +62,7 @@ export default function NavBar({ appName, userType }: { appName: string; userTyp
   if (showNav) {
     return (
       <>
-        <div className='tw-navbar tw-bg-base-100 tw-z-[10000] tw-shadow-xl tw-relative'>
+        <div className='tw-navbar tw-bg-base-100 tw-z-[9998] tw-shadow-xl tw-relative'>
           <button
             className='tw-btn tw-btn-square tw-btn-ghost'
             data-te-sidenav-toggle-ref

src/Components/Profile/Subcomponents/GalleryView.tsx

@@ -1,23 +1,41 @@
+/* eslint-disable import/no-unassigned-import */
+/* eslint-disable import/order */
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/restrict-template-expressions */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { useState } from 'react'
-import Lightbox from 'yet-another-react-lightbox/*'
+// eslint-disable-next-line import/no-named-as-default
+import Lightbox from 'yet-another-react-lightbox'
+import 'yet-another-react-lightbox/styles.css'
+import { RowsPhotoAlbum } from 'react-photo-album'
+import 'react-photo-album/rows.css'
+
+import { useAppState } from '#components/AppShell/hooks/useAppState'
 
 import type { Item } from '#types/Item'
 
 export const GalleryView = ({ item }: { item: Item }) => {
-  const [open, setOpen] = useState(false)
-  // eslint-disable-next-line no-console
-  console.log(item)
+  const [index, setIndex] = useState(-1)
+  const appState = useAppState()
+  const images = item.gallery.map((i, j) => {
+    return {
+      src: appState.assetsApi.url + `${i.directus_files_id.id}.jpg`,
+      width: i.directus_files_id.width,
+      height: i.directus_files_id.height,
+      index: j,
+    }
+  })
   return (
-    <>
-      <button type='button' onClick={() => setOpen(true)}>
-        Open Lightbox
-      </button>
-
-      <Lightbox
-        open={open}
-        close={() => setOpen(false)}
-        slides={[{ src: '/image1.jpg' }, { src: '/image2.jpg' }, { src: '/image3.jpg' }]}
+    <div className='tw-mx-6 tw-mb-6'>
+      <RowsPhotoAlbum
+        photos={images}
+        targetRowHeight={150}
+        onClick={({ index: current }) => setIndex(current)}
       />
-    </>
+
+      <Lightbox index={index} slides={images} open={index >= 0} close={() => setIndex(-1)} />
+    </div>
   )
 }

src/Components/Profile/Templates/FlexView.tsx

@@ -3,6 +3,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 
 import { ContactInfoView } from '#components/Profile/Subcomponents/ContactInfoView'
+import { GalleryView } from '#components/Profile/Subcomponents/GalleryView'
 import { GroupSubHeaderView } from '#components/Profile/Subcomponents/GroupSubHeaderView'
 import { ProfileStartEndView } from '#components/Profile/Subcomponents/ProfileStartEndView'
 import { ProfileTextView } from '#components/Profile/Subcomponents/ProfileTextView'
@@ -14,6 +15,7 @@ const componentMap = {
   texts: ProfileTextView,
   contactInfos: ContactInfoView,
   startEnd: ProfileStartEndView,
+  gallery: GalleryView,
   // weitere Komponenten hier
 }