photo grid fix

README.md

@@ -78,4 +78,9 @@ hellooo it's mee, Flip :D
 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
 
 npm install @mui/material @emotion/react @emotion/styled
-npm install @mui/lab
+npm install @mui/lab
\ No newline at end of file
+yarn add react-simple-maps
+npm -i @types/react-simple-maps
+
+yarn add react-grid-gallery
+yarn add react-select
\ No newline at end of file

package-lock.json

@@ -17,12 +17,14 @@
         "react": "^18.2.0",
         "react-bootstrap": "^2.10.2",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.23.0"
+        "react-router-dom": "^6.23.0",
+        "react-simple-maps": "^3.0.0"
       },
       "devDependencies": {
         "@types/node": "^20.12.10",
         "@types/react": "^18.2.66",
         "@types/react-dom": "^18.2.22",
+        "@types/react-simple-maps": "^3.0.4",
         "@typescript-eslint/eslint-plugin": "^7.2.0",
         "@typescript-eslint/parser": "^7.2.0",
         "@vitejs/plugin-react": "^4.2.1",
@@ -1328,6 +1330,46 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/d3-color": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-2.0.6.tgz",
+      "integrity": "sha512-tbaFGDmJWHqnenvk3QGSvD3RVwr631BjKRD7Sc7VLRgrdX5mk5hTyoeBL6rXZaeoXzmZwIl1D2HPogEdt1rHBg==",
+      "dev": true
+    },
+    "node_modules/@types/d3-geo": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-2.0.7.tgz",
+      "integrity": "sha512-RIXlxPdxvX+LAZFv+t78CuYpxYag4zuw9mZc+AwfB8tZpKU90rMEn2il2ADncmeZlb7nER9dDsJpRisA3lRvjA==",
+      "dev": true,
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-2.0.5.tgz",
+      "integrity": "sha512-UINE41RDaUMbulp+bxQMDnhOi51rh5lA2dG+dWZU0UY/IwQiG/u2x8TfnWYU9+xwGdXsJoAvrBYUEQl0r91atg==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-color": "^2"
+      }
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-2.0.4.tgz",
+      "integrity": "sha512-5a21DF7avVPmiUau8KTsv5r76yGqbMgq4QtByoCBPXUrVFWFkd3Ob4OOhmePNRbQqfUCNFjgB4sO7sUURnKcBg==",
+      "dev": true
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-2.0.7.tgz",
+      "integrity": "sha512-JWke4E8ZyrKUQ68ESTWSK16fVb0OYnaiJ+WXJRYxKLn4aXU0o4CLYxMWBEiouUfO3TTCoyroOrGPcBG6u1aAxA==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-interpolate": "^2",
+        "@types/d3-selection": "^2"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -1335,6 +1377,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.14",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
+      "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==",
+      "dev": true
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1383,6 +1431,18 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-simple-maps": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/react-simple-maps/-/react-simple-maps-3.0.4.tgz",
+      "integrity": "sha512-U9qnX0wVhxldrTpsase44fIoLpyO1OT/hgNMRoJTixj1qjpMRdSRIfih93mR3D/Tss/8CmM7dPwKMjtaGkDpmw==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-geo": "^2",
+        "@types/d3-zoom": "^2",
+        "@types/geojson": "*",
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.10",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
@@ -1916,6 +1976,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1966,6 +2031,91 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "dependencies": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
+      "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
+    },
+    "node_modules/d3-dispatch": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-2.0.0.tgz",
+      "integrity": "sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA=="
+    },
+    "node_modules/d3-drag": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-2.0.0.tgz",
+      "integrity": "sha512-g9y9WbMnF5uqB9qKqwIIa/921RYWzlUDv9Jl1/yONQwxbOfszAWTCm8u7HOTgJgRDXiRZN56cHT9pd24dmXs8w==",
+      "dependencies": {
+        "d3-dispatch": "1 - 2",
+        "d3-selection": "2"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-2.0.0.tgz",
+      "integrity": "sha512-68/n9JWarxXkOWMshcT5IcjbB+agblQUaIsbnXmrzejn2O82n3p2A9R2zEB9HIEFWKFwPAEDDN8gR0VdSAyyAQ=="
+    },
+    "node_modules/d3-geo": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-2.0.2.tgz",
+      "integrity": "sha512-8pM1WGMLGFuhq9S+FpPURxic+gKzjluCD/CHTuUF3mXMeiCo0i6R0tO1s4+GArRFde96SLcW/kOFRjoAosPsFA==",
+      "dependencies": {
+        "d3-array": "^2.5.0"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
+      "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
+      "dependencies": {
+        "d3-color": "1 - 2"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-2.0.0.tgz",
+      "integrity": "sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA=="
+    },
+    "node_modules/d3-timer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-2.0.0.tgz",
+      "integrity": "sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA=="
+    },
+    "node_modules/d3-transition": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-2.0.0.tgz",
+      "integrity": "sha512-42ltAGgJesfQE3u9LuuBHNbGrI/AJjNL2OAUdclE70UE6Vy239GCBEYD38uBPoLeNsOhFStGpPI0BAOV+HMxog==",
+      "dependencies": {
+        "d3-color": "1 - 2",
+        "d3-dispatch": "1 - 2",
+        "d3-ease": "1 - 2",
+        "d3-interpolate": "1 - 2",
+        "d3-timer": "1 - 2"
+      },
+      "peerDependencies": {
+        "d3-selection": "2"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-2.0.0.tgz",
+      "integrity": "sha512-fFg7aoaEm9/jf+qfstak0IYpnesZLiMX6GZvXtUSdv8RH2o4E2qeelgdU09eKS6wGuiGMfcnMI0nTIqWzRHGpw==",
+      "dependencies": {
+        "d3-dispatch": "1 - 2",
+        "d3-drag": "2",
+        "d3-interpolate": "1 - 2",
+        "d3-selection": "2",
+        "d3-transition": "2"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -2601,6 +2751,11 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+    },
     "node_modules/invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -3283,6 +3438,22 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-simple-maps": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/react-simple-maps/-/react-simple-maps-3.0.0.tgz",
+      "integrity": "sha512-vKNFrvpPG8Vyfdjnz5Ne1N56rZlDfHXv5THNXOVZMqbX1rWZA48zQuYT03mx6PAKanqarJu/PDLgshIZAfHHqw==",
+      "dependencies": {
+        "d3-geo": "^2.0.2",
+        "d3-selection": "^2.0.0",
+        "d3-zoom": "^2.0.0",
+        "topojson-client": "^3.1.0"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.7.2",
+        "react": "^16.8.0 || 17.x || 18.x",
+        "react-dom": "^16.8.0 || 17.x || 18.x"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -3576,6 +3747,19 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/topojson-client": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.1.0.tgz",
+      "integrity": "sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==",
+      "dependencies": {
+        "commander": "2"
+      },
+      "bin": {
+        "topo2geo": "bin/topo2geo",
+        "topomerge": "bin/topomerge",
+        "topoquantize": "bin/topoquantize"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",

package.json

@@ -19,12 +19,16 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.23.0"
+    "react-grid-gallery": "^1.0.1",
+    "react-router-dom": "^6.23.0",
+    "react-select": "^5.8.0",
+    "react-simple-maps": "^3.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.12.10",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
+    "@types/react-simple-maps": "^3.0.4",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",

src/components/photo-grid.tsx

 /*  */
-import React from 'react'
-import Select from 'react-select'
-import { Gallery } from 'react-grid-gallery'
+import { Gallery} from 'react-grid-gallery'
+import { ThumbnailImageProps } from 'react-grid-gallery'
 const images = [
   {src:"https://static.igem.wiki/teams/5247/photos/meetup/badges.jpeg", width: 320, height: 212},
   {src:"https://static.igem.wiki/teams/5247/photos/meetup/joern.jpeg",  width: 320, height: 212},
@@ -37,14 +36,11 @@ const images = [
 
 
 export default function BFHGallery(){
-  const options = [
-    { value: 'hi', label: 'Hi' },
-    { value: 'strawberry', label: 'Strawberry' },
-    { value: 'vanilla', label: 'Vanilla' }]
+
     return(
       <div>
 
-     {/*  <Select options={options} /> */}
+
   
       <Gallery images={images} enableImageSelection={false} thumbnailImageComponent={ImageComponent}/>
       
@@ -52,13 +48,10 @@ export default function BFHGallery(){
     )
 }
 
-
-import { ThumbnailImageProps } from "react-grid-gallery";
- 
 const ImageComponent = (props: ThumbnailImageProps) => {
  
-    return (
-      <div id={props.imageProps.alt}> <img {...props.imageProps} /> </div>
-    )
- 
-};
+  return (
+    <div id={props.imageProps.alt}> <img {...props.imageProps} /> </div>
+  )
+  
+};
\ No newline at end of file