Back/Forward buttons

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<BackProperties> = (props: BackProperties) => {
+  const onClickHandler = (event: any) => {
+    window.history.back();
+  };
+
+  return (
+    <IonButton
+      onClick={onClickHandler}
+      size='large'
+      className='back-forward'
+      shape='round'
+      fill='solid'
+    >
+      <IonIcon slot='icon-only' icon={arrowBackCircleOutline} />
+    </IonButton>
+  );
+};
+
+export default Back;

src/components/buttons/BackForward.css

@@ -0,0 +1,5 @@
+ion-button.back-forward {
+  --opacity: 0.6;
+  --ion-background-color: white;
+  --ionicon-stroke-width: 48px;
+}

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<ForwardProperties> = (props: ForwardProperties) => {
+  const onClickHandler = (event: any) => {
+    window.history.forward();
+  };
+
+  return (
+    <IonButton
+      onClick={onClickHandler}
+      size='large'
+      className='back-forward'
+      shape='round'
+      fill='solid'
+    >
+      <IonIcon slot='icon-only' icon={arrowForwardCircleOutline} />
+    </IonButton>
+  );
+};
+
+export default Forward;