How to have multiple Source tabs?

[littlefengers]

We're migrating our framework to React this year, but we're still going to continue to use our legacy HTML/SCSS framework so we need a way to show code snippets for both.

I've seen this done in other storybooks (https://uikit.wfp.org/docs/index.html?path=/docs/components-ui-elements-button--button-regular).

Does anyone know how this is done or if there's an addon that I could use to do this?

Looking at WFP's source, it looks like they created a custom blocks. Is this the best way to do this or is there an easier way?

https://github.com/wfp/ui/blob/7b0a193c24e7becbca120bec6a5a73de4a17a62b/.storybook/blocks/PurePreview.tsx

Thanks

[bastiW]

Same applies for angular components. They usually show HTML, TS Component and the Module.

[akashyeole]

How did WFP add the custom multi-tab source (react and html) ?
I also need to implement it the storybook.