Added Functional Next and Prev Button

[renoseHarsh]

Proposed Changes

• Fixes Add Next and Previous Scroll button for files preview #8321
• Added Next and Previous Button
• Passing a list to src/Components/Common/FilePreviewDialog.tsx that keeps track of the next and previous element
• Added a Index state which keeps track of current displayed file Index in the List

@coronasafe/care-fe-code-reviewers @coronasafe/code-reviewers

Merge Checklist

• Add specs that demonstrate bug / test a new feature.
• Update product documentation.
• Ensure that UI text is kept in I18n files.
• Prep screenshot or demo video for changelog entry, and attach it to issue.
• Request for Peer Reviews
• Completion of QA

[vercel]

@renoseHarsh is attempting to deploy a commit to the Open Healthcare Network Team on Vercel.

A member of the Team first needs to authorize it.

[netlify]

✅ Deploy Preview for care-egov-staging ready!

Name	Link
🔨 Latest commit	57aabdb
🔍 Latest deploy log	https://app.netlify.com/sites/care-egov-staging/deploys/66c7682dffe28e0009843d4a
😎 Deploy Preview	https://deploy-preview-8361--care-egov-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[nihal467]

• the buttons in the mobile view, making the preview image smaller compared to the existing staging version so that I would say, keep the buttons at the top or bottom in the mobile view only, so the preview image is forced to be smaller

cc: @rithviknishad

[renoseHarsh]

This was the fix I was able to come up with but this doesn't set the buttons in a row when the screen is small so they look something like this

This happens because the left button, center content, and right button are inside a row flex grid, which is changed to a column when the screen is small. Is there a way to set the left button, and right button to row without putting a div outside them?

The other way I thought of was to always have the buttons be down there even when the screen is big or small.

The last solution I thought of was to have two sets of buttons one on the left and right side of the center content which gets hidden when on a mobile screen, and the other set of buttons below the center content which gets hidden when screen a big screen will this work as there would duplicate code?

Please tell me if there is a better way of doing this that I am missing.

[github-actions]

👋 Hi, @renoseHarsh,
Conflicts have been detected against the base branch. Please rebase your branch against the base branch.

---

This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there.