From 362db79e26347828682d14d72cf71965da5c3052 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Damla=20K=C3=B6ksal?= <me@damlakoksal.com>
Date: Fri, 16 Apr 2021 19:30:44 +0300
Subject: [PATCH] [#88] refactor: connect map info to db

---
 components/map/map.component.tsx | 16 ++++------------
 components/map/map.module.scss   | 11 +++++++++++
 interfaces/index.ts              |  5 +++++
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/components/map/map.component.tsx b/components/map/map.component.tsx
index 8cab923..aee2061 100644
--- a/components/map/map.component.tsx
+++ b/components/map/map.component.tsx
@@ -1,14 +1,12 @@
-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
 }
@@ -16,19 +14,12 @@ interface Props {
 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}
     />
   )
 }
diff --git a/components/map/map.module.scss b/components/map/map.module.scss
index e69de29..661c58f 100644
--- a/components/map/map.module.scss
+++ b/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;
+    }
+}
diff --git a/interfaces/index.ts b/interfaces/index.ts
index a19ec83..9cc4fe8 100644
--- a/interfaces/index.ts
+++ b/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 {