Front session1_3

front_4_web/package.json

@@ -14,6 +14,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",
     "antd": "^5.5.2",
+    "leaflet": "^1.9.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-leaflet": "^4.2.1",

front_4_web/src/modules/common/components/Button.tsx

@@ -0,0 +1,7 @@
+export const Button = (): JSX.Element=>{
+    return(
+      <div>
+
+      </div>
+    )
+}

front_4_web/src/modules/common/components/styles/Button.style.ts

@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+export const Bottom = styled.button`
+
+`;

front_4_web/src/modules/dashboard/components/Content.tsx

@@ -1,8 +1,8 @@
 import { Map } from "../../details/components/Map";
-export const Content = (): JSX.Element => {
+export const Content = (props?:any): JSX.Element => {
     return(
       <>
-        <Map/>     
+         <Map lat={0} lng={0}/>    
       </>
     )
 }

front_4_web/src/modules/dashboard/components/MainViewer.tsx

@@ -1,14 +1,14 @@
-import GlobalStyles from "../../common/styles/GlobalStyles"
-import { NavigationTop } from "../../common/components/Navigation/Top/NavigationTop"
-import { NavigationBottom } from "../../common/components/Navigation/Bottom/NavigationBottom"
-import { Map } from "../../details/components/Map"
+import GlobalStyles from "./styles/Global.style"
+import { NavigationTop } from "./NavigationTop"
+import { NavigationBottom } from "./NavigationBottom"
+import { Content } from "./Content"
 export const MainViewer = () => {
     return (
         <>
             <GlobalStyles />
             <div>
                 <NavigationTop />
-                <Map />
+                    <Content/>
                 <NavigationBottom />
             </div>
         </>

front_4_web/src/modules/common/components/Navigation/Bottom/NavigationBottom.tsx → front_4_web/src/modules/dashboard/components/NavigationBottom.tsx

@@ -1,5 +1,5 @@
 import { Button } from 'antd';
-import { StyledNavigationBottom } from './NavigationBottom.styled' 
+import { StyledNavigationBottom } from './styles/NavigationBottom.style' 
 export const NavigationBottom = () => {
   return(
     <StyledNavigationBottom>

front_4_web/src/modules/common/components/Navigation/Top/NavigationTop.tsx → front_4_web/src/modules/dashboard/components/NavigationTop.tsx

@@ -1,5 +1,5 @@
-import { StyledNavigationTop, StyledDiv, NavigationProfile } from "./NavigationTop.styled";
-import Brand from '../../../../../assets/images/Brand.svg';
+import { StyledNavigationTop, StyledDiv, NavigationProfile } from "./styles/NavigationTop.style";
+import Brand from '../../../assets/images/Brand.svg';
 import { NotificationFilled } from '@ant-design/icons';
 import { Button } from "antd";
 

front_4_web/src/modules/details/components/Map.tsx

@@ -1,23 +1,38 @@
-import { TileLayer, MapContainer, Marker, Popup} from 'react-leaflet'
-export const Map = (): JSX.Element=>{
+import { TileLayer, 
+         MapContainer, 
+         Marker, 
+         Popup, 
+         /*useMapEvents*/
+        } from 'react-leaflet';
+//import {useState, useEffect} from 'react';
+//import L from "leaflet";
+
+interface CoordinatesStart {
+    lat: number,
+    lng: number
+};
+
+interface CoordinatesDestinate {
+    lat: number,
+    lng: number
+};
+
+
+export const Map = (positionStart: CoordinatesStart, destinationEnd: CoordinatesDestinate): JSX.Element=>{
+
     return(
         <MapContainer
-            style={{ height: '50vh' }}
+            style={{ height: '85vh' }}
             center={[51.505, -0.09]} 
             zoom={13} 
             scrollWheelZoom={false}>
-            <TileLayer
-                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-            />
-                <div>
-                    here will be  our map!!
-                </div>
-        <Marker position={[51.505, -0.09]}>
-            <Popup>
-                A pretty CSS3 popup. <br /> Easily customizable.
-            </Popup>
-        </Marker>
+            <TileLayer attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                       url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"/>
+            <Marker position={[0, 0]}>
+                <Popup>
+                    A popup. <br /> Easy custom.
+                </Popup>
+            </Marker>
         </MapContainer>
 
     )