Add portafolio page

src/components/MediaGallery/Gallery.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { MediaType, type Media } from './types';
+
+interface Props {
+  items: Media[];
+}
+
+// TODO: transform this component in a lightbox
+export default function Gallery({ items }: Props): JSX.Element {
+  const renderItem = (item: Media): JSX.Element => {
+    // get the file id from the "share" link of google drive
+    const googleFileId = item.url.split('/').at(5);
+    let 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>
+        );
+
+      default:
+        break;
+    }
+
+    return <></>;
+  };
+
+  return (
+    <ul className="list-unstyle">
+      {items.map((item, idx) => (
+        <li key={idx}>{renderItem(item)}</li>
+      ))}
+    </ul>
+  );
+}