Feature request to customize the tab menu

[danilowoz]

Description

My requirement is to add delete button and add button.

Link

I have confirmed that the delete function is available through the options in the link above.

But fundamentally, it would be more useful if the user could customize the tab part!

For example, I think the API for that feature request could look something like the one below!

import {
  SandpackProvider,
  SandpackLayout,
  SandpackCodeEditor,
  SandpackPreview,
  // example
  SandpackTab,
  SandpackTabItem
} from "@codesandbox/sandpack-react";

// example
const files = {
  'App.js': 'code1',
  'Example.js': 'code2',
};

const delete = () => {
  alert('Delete');
}

const CustomSandpack = () => (
  <SandpackProvider template="react">
    <SandpackLayout>
      <SandpackCodeEditor>
        <SandpackTab>
          {Object.entries(files).map(([name, code]) => {
            return (
              <SandpackTabItem>
                <span>{name}</span>
                <button onClick={delete}>Delete</button>
              </SandpackTabItem>
            )
          })}
        </SandpackTab>
      </SandpackCodeEditor>
      <SandpackPreview />
    </SandpackLayout>
  </SandpackProvider>
);

Just an example, if there is a better structure or way, anything is welcome!

If you agree with the need for this feature, please comment!

[ryuhangyeong]

https://github.com/codesandbox/sandpack/discussions/705

+1