feat(react): add button to reload a preview

[Nemikolh]

This PR replaces the globe icon with a reload button, to reload a preview. It uses the new reloadPreview function from @webcontainer/api/utils.

Closes #248

Note that this is best effort. Meaning that if the learner navigates within the preview to a location that does not render HTML (like an image or JSON), pressing the reload icon won't work as it will reset the iframe to its initial location. This can only be fixed at the WebContainer level.

[stackblitz[bot]]

Run & review this pull request in StackBlitz Codeflow.

[cloudflare-workers-and-pages[bot]]

Deploying tutorialkit-demo-page with    Cloudflare Pages

Latest commit:	3214499
Status:	✅  Deploy successful!
Preview URL:	https://c763c9a6.tutorialkit-demo-page.pages.dev
Branch Preview URL:	https://joan-reload-preview.tutorialkit-demo-page.pages.dev

View logs

[henrikvilhelmberglund]

The duotone icon looks strange to me too, https://icones.js.org/collection/ph?s=arrow&icon=ph:arrow-clockwise could be used instead, along with a dark:text-slate-100 or something if necessary for the color.

[Nemikolh]

@henrikvilhelmberglund I'll change it to the arrow-clockwise then. Thanks for voicing your opinion :smiley:

[Nemikolh]

We should create separate follow-up issue for updating the background of the old icon-buttons too.

@AriPerkkio Oh do you mean updating all the ph-duo icons for their non-duotone version?

[AriPerkkio]

@AriPerkkio Oh do you mean updating all the ph-duo icons for their non-duotone version?

Yep, at least the reset button looks similarly weird now that I've seen how clear the refresh button looks after the change. 😄

Or maybe this in intentional?

[Nemikolh]

@AriPerkkio It was, but we can also change them I think. It was not my choice :man_shrugging:

Tbqh, I've always felt that, at the very least, they should be customizable. I'll open a ticket for that and another one to change them to their non-duotone versions.

EDIT: Created https://github.com/stackblitz/tutorialkit/issues/311