115. Tabs with Animations

Build an enhanced Tabs component that extends the basic tabs with smooth animations, keyboard navigation, and lazy loading.

Requirements

1. Basic Tab Functionality (from Tabs I)

• Tab switching on click
• Active tab indication
• Content display for active tab

2. Smooth Animations

• Animate tab content transitions (fade, slide, etc.)
• Smooth underline indicator animation
• Respect prefers-reduced-motion for accessibility

3. Keyboard Navigation

• Arrow keys (Left/Right) to navigate between tabs
• Enter/Space to activate focused tab
• Tab key to move focus between tabs
• Home/End keys to jump to first/last tab

4. Lazy Loading

• Load tab content only when first opened
• Preserve loaded content when switching away
• Show loading state for content being loaded

5. Enhanced Features

• Optional: Tab icons
• Optional: Disabled tabs
• Optional: Closeable tabs (if applicable)

Example Usage

const tabs = [
  { 
    id: 'tab1', 
    label: 'Tab 1', 
    content: <HeavyComponent />, // Only loads when tab is opened
    icon: <Icon />, // Optional
    disabled: false, // Optional
  },
  // ...
];

> Note: Build on top of the basic tabs implementation. Focus on smooth animations and keyboard accessibility.