[#88] refactor: connect map info to db

components/map/map.component.tsx

@@ -1,34 +1,25 @@
-import React, { CSSProperties, ReactElement, useEffect, useState } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 
-// import styles from './map.module.scss'
+import styles from './map.module.scss'
 
 import mapboxgl from 'mapbox-gl'
 
 interface Props {
   mapApi: string
   id: string
-  width: number
-  height: number
   coordinate: [number, number]
   HTML: string
 }
 
 export default function Map ({
   mapApi,
   id,
-  width,
-  height,
   coordinate,
   HTML
 }: Props
 ): ReactElement {
   const [pageIsMounted, setPageIsMounted] = useState(false)
 
-  const style: CSSProperties = {
-    width,
-    height
-  }
-
   mapboxgl.accessToken = mapApi
 
   useEffect(() => {
@@ -53,8 +44,9 @@ export default function Map ({
 
   return (
     <div
+      style={{ marginTop: '4vh' }}
       id={id}
-      style={style}
+      className={styles.map}
     />
   )
 }

components/map/map.module.scss

@@ -0,0 +1,11 @@
+@use "../../global/variables.scss" as variables;
+
+.map {
+    height: 400px;
+    width: 400px;
+
+    @media only screen and (max-width: variables.$max-width-middleEnd) {
+        height: 300px;
+        width: 300px;
+    }
+}

interfaces/index.ts

@@ -143,6 +143,11 @@ export interface ItemModel {
     value: string
     link: string
   }
+  map: {
+    id: string
+    coordinate: [number, number]
+    HTML: string
+  }
 }
 
 export interface ContactModel {