feat(components): Add lightgallery library

Add external library until I develop a custom ligthbox
closes #20

src/components/MediaGallery/Gallery.tsx

@@ -1,30 +1,77 @@
 import React from 'react';
 import { MediaType, type Media } from './types';
 
+import classes from './Gallery.module.css';
+
+import LightGallery from 'lightgallery/react';
+
+// import styles
+import 'lightgallery/css/lightgallery.css';
+import 'lightgallery/css/lg-zoom.css';
+import 'lightgallery/css/lg-thumbnail.css';
+
+// import plugins if you need
+import lgThumbnail from 'lightgallery/plugins/thumbnail';
+import lgZoom from 'lightgallery/plugins/zoom';
+import lgVideo from 'lightgallery/plugins/video';
+
 interface Props {
   items: Media[];
 }
 
-// TODO: transform this component in a lightbox
+// TODO: Replace the external library for custom module
 export default function Gallery({ items }: Props): JSX.Element {
-  const renderItem = (item: Media): JSX.Element => {
+  const getUrlFromGoogleDrive = (
+    originalUrl: string,
+    type: MediaType,
+  ): string => {
     // get the file id from the "share" link of google drive
-    const googleFileId = item.url.split('/').at(5);
-    let url;
+    const googleFileId = originalUrl.split('/').at(5);
+
+    if (googleFileId == null) {
+      return originalUrl;
+    }
+
+    switch (type) {
+      case MediaType.Image:
+        return `https://drive.google.com/uc?export=preview&id=${googleFileId}`;
+      case MediaType.Video:
+        return `https://drive.google.com/file/d/${googleFileId}/preview`;
+      default:
+        return '';
+    }
+  };
+
+  const renderItem = (item: Media, index: number): JSX.Element => {
+    // get the file id from the "share" link of google drive
+    const url = getUrlFromGoogleDrive(item.url, item.type);
+    let thumbnail;
+
+    if (item.thumbnail !== undefined) {
+      thumbnail = getUrlFromGoogleDrive(item.thumbnail, MediaType.Image);
+    } else {
+      thumbnail = url;
+    }
+
     switch (item.type) {
       case MediaType.Image:
-        url =
-          googleFileId !== undefined
-            ? `https://drive.google.com/uc?export=preview&id=${googleFileId}`
-            : item.url;
-        return <img src={url} alt={item.alt} />;
-      case MediaType.Video:
-        url =
-          googleFileId !== undefined
-            ? `https://drive.google.com/file/d/${googleFileId}/preview`
-            : item.url;
         return (
-          <iframe src={url} width="600" height="500" allow="autoplay"></iframe>
+          <a key={index} href={url} className={classes.thumbnailItem}>
+            <img src={url} alt={item.alt} />
+          </a>
+        );
+      case MediaType.Video:
+        return (
+          <div
+            key={index}
+            className={classes.thumbnailItem}
+            data-src={url}
+            data-iframe={true}
+            id={item.url}
+            data-iframe-title="foo"
+          >
+            <img src={thumbnail} alt={item.alt} />
+          </div>
         );
 
       default:
@@ -35,10 +82,14 @@ export default function Gallery({ items }: Props): JSX.Element {
   };
 
   return (
-    <ul className="list-unstyle">
-      {items.map((item, idx) => (
-        <li key={idx}>{renderItem(item)}</li>
-      ))}
-    </ul>
+    <div>
+      <LightGallery
+        speed={500}
+        plugins={[lgThumbnail, lgZoom, lgVideo]}
+        elementClassNames={classes.thumbnailList}
+      >
+        {items.map(renderItem)}
+      </LightGallery>
+    </div>
   );
 }