feat: ao clicar no bloco/sala redireciona para nova pagina ou horarios

package.json

@@ -22,6 +22,7 @@
     "@fortawesome/free-regular-svg-icons": "^5.12.1",
     "@fortawesome/free-solid-svg-icons": "^5.12.1",
     "@fortawesome/react-fontawesome": "^0.1.8",
+    "@reach/router": "^1.3.3",
     "gatsby": "^2.18.12",
     "gatsby-image": "^2.2.34",
     "gatsby-plugin-google-analytics": "^2.1.31",

src/pages/index.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 
+import { navigate } from '@reach/router';
 import Layout from '~/templates/Layout';
 
 import { theme } from '../styles/theme';
@@ -11,6 +12,14 @@ const IndexPage = () => {
   const [placeName, setPlaceName] = useState('');
   const [link, setLink] = useState('');
 
+  function handleNavigate(page) {
+    if (page.link) {
+      window.open(page.link, '_blank');
+    } else {
+      navigate(`/${page.slug}`);
+    }
+  }
+
   useEffect(() => {
     externo.forEach(placeInJSON => {
       const placeInDOM = document.getElementById(placeInJSON.id);
@@ -23,10 +32,11 @@ const IndexPage = () => {
         const y = event.pageY - 300;
         const FloatingWindow = document.getElementById('float-window');
         FloatingWindow.style.display = 'flex';
-        FloatingWindow.style.width = '300px';
-        FloatingWindow.style.height = '100px';
+        FloatingWindow.style.width = '350px';
+        FloatingWindow.style.height = '150px';
         FloatingWindow.style.top = `${y}px`;
         FloatingWindow.style.left = `${x}px`;
+        FloatingWindow.style.border = `1px solid ${theme.primary.border}`;
         FloatingWindow.style.backgroundColor = theme.primary.fill;
       };
 
@@ -36,15 +46,21 @@ const IndexPage = () => {
         FloatingWindow.style.height = '0px';
         FloatingWindow.style.width = '0px';
       };
+
+      placeInDOM.onclick = () => handleNavigate(placeInJSON);
     });
   }, []);
 
   return (
     <Layout title="Mapa Principal">
       <h2>Seção do mapa principal</h2>
       <div id="float-window">
-        <h3>Nome: {placeName || 'Não Catalogado'}</h3>
-        <h4>Link: {link || 'Não tem horário'}</h4>
+        <h3>{placeName || 'Não Catalogado'}</h3>
+        <h4>
+          {link
+            ? 'Clique para acessar o horário'
+            : 'Clique para ver internamente'}
+        </h4>
       </div>
       <MainMap />
     </Layout>

src/styles/theme.js

@@ -5,6 +5,7 @@ export const theme = {
     active: '#3D3D3D',
     hover: '#2B2B2B',
     fill: '#3FB59B',
+    border: '#692710',
   },
   secundary: {
     bg: '#F9F9F9',

yarn.lock

@@ -1338,6 +1338,16 @@
     react-lifecycles-compat "^3.0.4"
     warning "^3.0.0"
 
+"@reach/router@^1.3.3":
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.3.3.tgz#58162860dce6c9449d49be86b0561b5ef46d80db"
+  integrity sha512-gOIAiFhWdiVGSVjukKeNKkCRBLmnORoTPyBihI/jLunICPgxdP30DroAvPQuf1eVfQbfGJQDJkwhJXsNPMnVWw==
+  dependencies:
+    create-react-context "0.3.0"
+    invariant "^2.2.3"
+    prop-types "^15.6.1"
+    react-lifecycles-compat "^3.0.4"
+
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"
@@ -3590,6 +3600,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+[email protected]:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.3.0.tgz#546dede9dc422def0d3fc2fe03afe0bc0f4f7d8c"
+  integrity sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==
+  dependencies:
+    gud "^1.0.0"
+    warning "^4.0.3"
+
 create-react-context@^0.2.1:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
@@ -12982,6 +13000,13 @@ warning@^3.0.0:
   dependencies:
     loose-envify "^1.0.0"
 
+warning@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"