diff --git a/app/components/Map.tsx b/app/components/Map.tsx index 282a41d..540fb23 100644 --- a/app/components/Map.tsx +++ b/app/components/Map.tsx @@ -7,6 +7,7 @@ import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png' import markerIcon from 'leaflet/dist/images/marker-icon.png' import markerShadow from 'leaflet/dist/images/marker-shadow.png' + // @ts-ignore delete L.Icon.Default.prototype._getIconUrl // eslint-disable-line L.Icon.Default.mergeOptions({ @@ -16,31 +17,31 @@ L.Icon.Default.mergeOptions({ shadowUrl: markerShadow.src, }) + interface MapProps { center?: number[] } + + + + const Map: React.FC = ({ center }) => { return ( - - - {/* If a center is provided, add a marker */} - {center && ( - <> - {/* Marker is a component that adds a marker to the map */} - - - )} - + center={(center as L.LatLngExpression) || [51, -0.09]} + zoom={center ? 4 : 2} + scrollWheelZoom={false} + className="h-[35vh] rounded-lg" + > + + + {center && } + {/* Marker is a component that adds a marker to the map */} + ) } diff --git a/app/components/inputs/CountrySelect.tsx b/app/components/inputs/CountrySelect.tsx index 3361221..251e14c 100644 --- a/app/components/inputs/CountrySelect.tsx +++ b/app/components/inputs/CountrySelect.tsx @@ -1,24 +1,24 @@ 'use client' -import Select from 'react-select' -import useCountries from '@/app/hooks/useCountries' -import Image from 'next/image' +import Select from 'react-select'; +import useCountries from '@/app/hooks/useCountries'; +import Image from 'next/image'; export type CountrySelectValue = { - flag: string - label: string - latlng: number[] - region: string - value: string + flag: string; + label: string; + latlng: number[]; + region: string; + value: string; } interface CountrySelectProps { - value?: CountrySelectValue - onChange: (value: CountrySelectValue) => void + value?: CountrySelectValue; + onChange: (value: CountrySelectValue) => void; } const CountrySelect: React.FC = ({ value, onChange }) => { - const { getAll } = useCountries() + const { getAll } = useCountries(); return (
@@ -57,13 +57,13 @@ const CountrySelect: React.FC = ({ value, onChange }) => { borderRadius: 6, colors: { ...theme.colors, - primary: '#fcd75f', // if want give black - primary25: '#fef3c7', // light yellow for hover (rose colour is #ffe4e6) + primary: '#fcd75f', + primary25: '#fef3c7', }, })} />
- ) + ); } -export default CountrySelect +export default CountrySelect;