Create a reusable component to manage going forward and backward for cards

[ijemmao]

Is your feature request related to a problem? Please describe.
We want our navigation controls to be consistent across the board when navigating between sentences that need audio recorded or verified, and words that need Igbo definitions. Currently, the Igbo definitions navigation system looks different from the example sentences' navigation system.

The look of the navigation system within VerifySentenceAudio.tsx and RecordSentenceAudio.tsx is the same aesthetic we want for Igbo definitions.

Describe the solution you'd like
Create a reusable React component that's able to take in callback methods that will get called when the forward and back buttons are called. Additionally, the component should keep track of the total number of elements in the array to paginate through and the current index within the array of elements.

Then use this reusable components within the following pages:

• VerifySentenceAudio.tsx
• RecordSentenceAudio.tsx
• IgboDefinitions.tsx

We want to change this

Into this