From cb95c9a3580835f7f09c8924f1fb6cfb2bbe6d4e Mon Sep 17 00:00:00 2001
From: gugahnstn <gustavonstn@hotmail.com>
Date: Mon, 2 Oct 2023 00:36:01 -0300
Subject: [PATCH] fix: removing the 'SearchMap' file and adding 'index.tsx'.

---
 src/components/SearchMap/index.tsx | 42 ++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/components/SearchMap/index.tsx

diff --git a/src/components/SearchMap/index.tsx b/src/components/SearchMap/index.tsx
new file mode 100644
index 0000000..f06a212
--- /dev/null
+++ b/src/components/SearchMap/index.tsx
@@ -0,0 +1,42 @@
+import { SearchMapProps, ViewPort } from "../../types"; 
+import { useState, useEffect } from "react";
+import Map from "react-map-gl";
+
+export const SearchMap = ({ longitude, latitude }: SearchMapProps) => {
+  const [viewPort, setViewPort] = useState<ViewPort>({
+    attributionControl: false,
+    longitude: longitude,
+    latitude: latitude,
+    zoom: 5,
+  });
+
+  const [screenWidth, setScreenWidth] = useState<number>();
+
+  useEffect(() => {
+    setScreenWidth(() => {
+      let width = window.innerWidth;
+      const getWidth = width >= 768 ? 1280 : 420;
+
+      return getWidth;
+    })
+  });
+
+  useEffect(() => {
+    setViewPort({
+      attributionControl: false,
+      longitude: longitude,
+      latitude: latitude,
+      zoom: viewPort.zoom,
+    });
+  }, [longitude, latitude]);
+
+  return (
+      <Map
+        mapLib={import("mapbox-gl")}
+        initialViewState={{ ...viewPort }}
+        style={{ width: screenWidth, height: 420}}
+        mapStyle="mapbox://styles/mapbox/streets-v10"
+        mapboxAccessToken={import.meta.env.VITE_MAPBOX_TOKEN} />
+  );
+};
+