migrate 3D office pic to self hosted one

fuck google maps

package.json

@@ -19,7 +19,8 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
-    "react-icons": "^4.2.0"
+    "react-icons": "^4.2.0",
+    "react-pannellum": "^0.2.14"
   },
   "devDependencies": {
     "prettier": "2.2.1"

src/components/sections/office.js

@@ -1,6 +1,12 @@
 import * as React from "react"
 import * as styles from "./office.module.css"
 
+import ReactPannellum from "react-pannellum"
+
+const config = {
+  autoLoad: true,
+}
+
 const Office = () => (
   <section>
     <h2>Kontoret</h2>
@@ -10,13 +16,13 @@ const Office = () => (
         vårt og henge med andre medlemmer!
       </p>
 
-      <iframe
-        className={styles.frame}
-        src="https://www.google.com/maps/embed?pb=!4v1695744274768!6m8!1m7!1sCAoSLEFGMVFpcFBiSUJEWVhFcTFwMDBxWDZPamlhNXc2RjFvVEo2RWlYdmNNSnFM!2m2!1d59.9324458!2d10.7129466!3f300!4f0!5f0.7820865974627469"
-        allowfullscreen="true"
-        loading="lazy"
-        referrerpolicy="no-referrer-when-downgrade"
-      ></iframe>
+      <ReactPannellum
+        id="1"
+        sceneId="office"
+        config={config}
+        imageSource="/3D_office_2023_09_15.jpg"
+        style={{ width: "100%", aspectRatio: "1 / 1", background: "#000000" }} // yes, apparantly applying a css class to the component doesn't work
+      />
     </div>
   </section>
 )

src/components/sections/office.module.css

@@ -5,7 +5,7 @@
   place-items: center;
 }
 
-.frame {
+.image {
 	width: 100%;
 	aspect-ratio: 1 / 1;
 }