diff --git a/src/App.tsx b/src/App.tsx index 7fde6c1..ac48aa7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -34,6 +34,8 @@ import { MapScope } from './components/map/types'; import { debounce } from 'lodash'; import GetLocation from './components/buttons/GetLocation'; import { geoPoint } from './components/map/types'; +import Back from './components/buttons/Back'; +import Forward from './components/buttons/Forward'; setupIonicReact(); @@ -73,7 +75,10 @@ const App: React.FC = () => { - + + + + diff --git a/src/components/buttons/Back.tsx b/src/components/buttons/Back.tsx new file mode 100644 index 0000000..0d8cf03 --- /dev/null +++ b/src/components/buttons/Back.tsx @@ -0,0 +1,26 @@ +import react from 'react'; +import { IonButton, IonIcon } from '@ionic/react'; +import { arrowBackCircleOutline } from 'ionicons/icons'; +import './BackForward.css'; + +export interface BackProperties {} + +export const Back: react.FC = (props: BackProperties) => { + const onClickHandler = (event: any) => { + window.history.back(); + }; + + return ( + + + + ); +}; + +export default Back; diff --git a/src/components/buttons/BackForward.css b/src/components/buttons/BackForward.css new file mode 100644 index 0000000..045043c --- /dev/null +++ b/src/components/buttons/BackForward.css @@ -0,0 +1,5 @@ +ion-button.back-forward { + --opacity: 0.6; + --ion-background-color: white; + --ionicon-stroke-width: 48px; +} diff --git a/src/components/buttons/Forward.tsx b/src/components/buttons/Forward.tsx new file mode 100644 index 0000000..ea4f453 --- /dev/null +++ b/src/components/buttons/Forward.tsx @@ -0,0 +1,26 @@ +import react from 'react'; +import { IonButton, IonIcon } from '@ionic/react'; +import { arrowForwardCircleOutline } from 'ionicons/icons'; +import './BackForward.css'; + +export interface ForwardProperties {} + +export const Forward: react.FC = (props: ForwardProperties) => { + const onClickHandler = (event: any) => { + window.history.forward(); + }; + + return ( + + + + ); +}; + +export default Forward;