@autobusal/map 0.0.1 → 0.0.2

package/Column/Column.tsx

@@ -11,7 +11,6 @@ import { CityData } from '@autobusal/providers/types';
 import { SearchForm } from '../types';
 
 interface Props {
-  top: number
   from: CityData | null
   to: CityData | null
   t: TFunction<'common'>
@@ -19,7 +18,7 @@ interface Props {
   onResetAll: () => void
 }
 
-const Column = ({ top, from, to, t, onReset, onResetAll }: Props): JSX.Element => {
+const Column = ({ from, to, t, onReset, onResetAll }: Props): JSX.Element => {
   const { register, handleSubmit, formState: { errors }, setValue } = useForm<SearchForm>();
 
   const navigate = useNavigate();
@@ -39,7 +38,7 @@ const Column = ({ top, from, to, t, onReset, onResetAll }: Props): JSX.Element =
   };
 
   return (
-    <Container className="box" $top={ top }>
+    <Container className="box column">
       <form onSubmit={ handleSubmit(onSubmit) }>
         <Items>
           <Item className="row">

package/Column/styles.ts

@@ -1,12 +1,13 @@
 import styled from 'styled-components';
   
-export const Container = styled.div<{ $top: number }>`
-  position: absolute;
+export const Container = styled.div`
+  position: fixed;
   left: 0;
   bottom: 0;
   z-index: 6;
   width: 100%;
-  height: calc(100% - ${ props => props.$top }px);
+  display: flex;
+  justify-content: center;
   background: ${ props => props.theme.header.transparent };
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);

package/Display/Display.tsx

@@ -4,14 +4,13 @@ import { Container } from './styles';
 import { CityData } from '@autobusal/providers/types';
 
 interface Props {
-  top: number
   cities: CityData[]
   from: CityData | null
   to: CityData | null
   onClick: (item: CityData) => void
 }
 
-const Display = ({ top, cities, from, to, onClick }: Props): JSX.Element => {
+const Display = ({ cities, from, to, onClick }: Props): JSX.Element => {
   const markers = cities.map((item, index) => (
     <Marker key={ index } position={ getPosition(item.location) } eventHandlers={{ click: () => { onClick(item) } }}>
       <Popup>{ item.name }</Popup>
@@ -21,7 +20,7 @@ const Display = ({ top, cities, from, to, onClick }: Props): JSX.Element => {
   const line = drawLine(from, to);
 
   return (
-    <Container $top={ top }>
+    <Container>
       <MapContainer center={[ 41.32, 19.81 ]} minZoom={ 6 } maxZoom={ 13 } zoom={ 6 } scrollWheelZoom={ true }>
         <TileLayer attribution="&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors" url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
 

package/Display/styles.ts

@@ -1,13 +1,13 @@
 import styled from 'styled-components';
 import 'leaflet/dist/leaflet.css';
 
-export const Container = styled.div<{ $top: number }>`
+export const Container = styled.div`
   position: fixed;
-  top: ${ props => props.$top }px;
+  top: 0;
   left: 0;
   z-index: 5;
   width: 100%;
-  height: calc(100% - ${ props => props.$top }px);
+  height: 100%;
 
   & > .leaflet-container {
     width: 100%;

package/Map.tsx

@@ -7,11 +7,10 @@ import { CityData } from '@autobusal/providers/types';
 import { GetLocations } from './services';
 
 interface Props {
-  top: number
   t: TFunction<'common'>
 }
 
-const Map = ({ top, t }: Props): JSX.Element => {
+const Map = ({ t }: Props): JSX.Element => {
   const [ from, setFrom ] = useState<CityData | null>(null);
   const [ to, setTo ] = useState<CityData | null>(null);
 
@@ -41,7 +40,6 @@ const Map = ({ top, t }: Props): JSX.Element => {
   return (
     <Meta title={ t('map.title') }>
       <Column
-        top={ top }
         from={ from }
         to={ to }
         t={ t }
@@ -50,7 +48,6 @@ const Map = ({ top, t }: Props): JSX.Element => {
       />
 
       <Display
-        top={ top }
         cities={ data }
         from={ from }
         to={ to }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/map",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "main": "index.ts",
   "dependencies": {