Build an advanced Tabs component that supports dynamic tabs, closeable tabs, and advanced state management.
Requirements
1. All Previous Features (from Tabs I & II)
- Basic tab switching
- Animations and transitions
- Keyboard navigation
- Lazy loading
2. Dynamic Tabs
- Add new tabs dynamically
- Remove tabs dynamically
- Handle tab reordering (optional)
- Maintain active tab when tabs change
3. Closeable Tabs
- Show close button (X) on tabs
- Close tab on close button click
- Handle active tab being closed (switch to adjacent tab)
- Prevent closing last remaining tab (or handle gracefully)
4. Advanced State Management
- Persist tab state (which tabs are open, which is active)
- Handle tab overflow (scrollable tabs or dropdown)
- Optional: Tab groups or categories
5. Edge Cases
- Handle closing active tab
- Handle closing all tabs
- Handle adding duplicate tabs
- Maintain focus after tab operations
Example Usage
// Tabs can be added/removed dynamically
<Tabs
tabs={tabs}
onTabsChange={(newTabs) => setTabs(newTabs)}
onTabClose={(tabId) => handleClose(tabId)}
closable
/>
> Note: Build on top of Tabs II. Focus on robust state management and handling edge cases gracefully.