fix titles

NINAnor · Nov 28, 2023 · 05dc3ad · 05dc3ad
1 parent fe6466c
commit 05dc3ad
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/components/MapContextProvider.jsx b/src/components/MapContextProvider.jsx
@@ -30,6 +30,7 @@ export default function MapContextProvider({ children }) {
   const map = React.useRef(null);
   const [ready, setReady] = React.useState(false);
   const [layers, setLayers] = React.useState({});
+  const [style, setStyle] = React.useState(null);
 
   const setMap = (m) => {
     map.current = m
@@ -43,11 +44,13 @@ export default function MapContextProvider({ children }) {
         ...p,
         [c]: getLayer(c, style),
       }), {}));
+      setStyle(style);
     }
 
     function loadStyle() {
       const style = map.current.getStyle();
       document.title = style.name;
+      setStyle(style);
 
       for (const layer of style.layers) {
         map.current.on("click", layer.id, (e) => popup(e).addTo(map.current));
@@ -71,6 +74,7 @@ export default function MapContextProvider({ children }) {
     setMap,
     ready,
     layers,
+    style,
   }
 
   return (

diff --git a/src/components/Metadata.jsx b/src/components/Metadata.jsx
@@ -1,7 +1,11 @@
+import { useContext, useState } from "react";
 import useMetadata from "../hooks/useMetadata";
+import MapContext from "../contexts/map";
 
 
 export default function Metadata() {
+  const [open, setOpen] = useState(false);
+  const { style } = useContext(MapContext);
   const { data, isLoading } = useMetadata();
 
   if (isLoading || !data) {
@@ -10,8 +14,10 @@ export default function Metadata() {
 
   return (
     <div style={{ marginLeft: '0.5rem' }}>
-      <h5>{data.subtitle}</h5>
-      <div dangerouslySetInnerHTML={{ __html: data.description }} />
+      <h3>{style ? style.name : ''}</h3>
+      <p>{data.subtitle}</p>
+      <div onClick={() => setOpen(!open)}><i className={`fas fa-caret-${open ? 'down' : 'right'}`}></i> Description</div>
+      {open ? <div style={{ marginLeft: '0.5rem'}} dangerouslySetInnerHTML={{ __html: data.description }} /> : null}
     </div>
   )
 }