@delightui/components 0.1.105 → 0.1.107

package/docs/components/organisms/Tabs.md

@@ -0,0 +1,1330 @@
+# Tabs
+
+## Description
+
+A comprehensive tabs component that combines tab provider functionality with tab view presentation. Tabs provides a complete tabbed interface system with context management, state handling, and flexible styling options. It serves as the root container for TabItem and TabContent components, enabling seamless tab navigation with both horizontal and vertical orientations.
+
+## Aliases
+
+- Tabs
+- Tab Container
+- Tab System
+- Tabbed Interface
+- Tab Navigation
+
+## Props Breakdown
+
+**Combines:** `TabProviderProps` & `TabsViewProps`
+
+### TabProviderProps
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `children` | `ReactNode` | - | Yes | The content to be displayed within the tab provider |
+| `value` | `number \| string` | - | No | The value of the tab |
+| `style` | `TabsStyleEnum` | `'Filled'` | No | The tab item style to apply ('Filled' \| 'Underlined') |
+| `onClick` | `(value: string \| number) => void` | - | No | Callback function when a tab is clicked |
+
+### TabsViewProps
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `children` | `ReactNode` | - | Yes | The content to be displayed within the tabs |
+| `className` | `string` | - | No | Additional CSS class names for styling |
+| `style` | `TabsStyleEnum` | `'Filled'` | No | The tab item style to apply ('Filled' \| 'Underlined') |
+| `type` | `TabsTypeEnum` | `'Horizontal'` | No | The tab item type to apply ('Horizontal' \| 'Vertical') |
+
+## Examples
+
+### Basic Horizontal Tabs
+
+```tsx
+import { Tabs, TabItem, TabContent } from '@delightui/components';
+
+function BasicHorizontalTabsExample() {
+  return (
+    <Tabs style="Underlined" type="Horizontal">
+      <div style={{ display: 'flex', borderBottom: '1px solid #e0e0e0' }}>
+        <TabItem value="overview" defaultTab>Overview</TabItem>
+        <TabItem value="details">Details</TabItem>
+        <TabItem value="reviews">Reviews</TabItem>
+        <TabItem value="specifications">Specifications</TabItem>
+      </div>
+      
+      <TabContent value="overview">
+        <div style={{ padding: '24px' }}>
+          <h2>Product Overview</h2>
+          <p>
+            Get a comprehensive look at this amazing product. Our overview section provides 
+            key highlights, main features, and benefits that make this product stand out.
+          </p>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '16px', marginTop: '20px' }}>
+            <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+              <h4>🚀 Performance</h4>
+              <p>Exceptional speed and reliability for all your needs.</p>
+            </div>
+            <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+              <h4>💡 Innovation</h4>
+              <p>Cutting-edge technology with user-friendly design.</p>
+            </div>
+          </div>
+        </div>
+      </TabContent>
+      
+      <TabContent value="details">
+        <div style={{ padding: '24px' }}>
+          <h2>Detailed Information</h2>
+          <p>Dive deeper into the technical aspects and detailed features of this product.</p>
+          <ul style={{ marginTop: '16px', lineHeight: '1.6' }}>
+            <li>Advanced processing capabilities</li>
+            <li>Energy-efficient design</li>
+            <li>Multiple connectivity options</li>
+            <li>User-friendly interface</li>
+            <li>Comprehensive warranty coverage</li>
+          </ul>
+        </div>
+      </TabContent>
+      
+      <TabContent value="reviews">
+        <div style={{ padding: '24px' }}>
+          <h2>Customer Reviews</h2>
+          <p>See what our customers are saying about this product.</p>
+          <div style={{ marginTop: '20px' }}>
+            <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px', marginBottom: '12px' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
+                <strong>John D.</strong>
+                <span>⭐⭐⭐⭐⭐</span>
+              </div>
+              <p>"Excellent product! Exceeded my expectations in every way."</p>
+            </div>
+            <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
+                <strong>Sarah M.</strong>
+                <span>⭐⭐⭐⭐⭐</span>
+              </div>
+              <p>"Great value for money. Highly recommend!"</p>
+            </div>
+          </div>
+        </div>
+      </TabContent>
+      
+      <TabContent value="specifications">
+        <div style={{ padding: '24px' }}>
+          <h2>Technical Specifications</h2>
+          <div style={{ display: 'grid', gap: '12px', marginTop: '20px' }}>
+            <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', padding: '12px', backgroundColor: '#f5f5f5' }}>
+              <strong>Dimensions:</strong>
+              <span>10.5" × 7.2" × 2.1"</span>
+            </div>
+            <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', padding: '12px' }}>
+              <strong>Weight:</strong>
+              <span>2.3 lbs</span>
+            </div>
+            <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', padding: '12px', backgroundColor: '#f5f5f5' }}>
+              <strong>Material:</strong>
+              <span>Premium aluminum alloy</span>
+            </div>
+            <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', padding: '12px' }}>
+              <strong>Color Options:</strong>
+              <span>Silver, Space Gray, Gold</span>
+            </div>
+          </div>
+        </div>
+      </TabContent>
+    </Tabs>
+  );
+}
+```
+
+### Vertical Tabs Layout
+
+```tsx
+import { Tabs, TabItem, TabContent, Text } from '@delightui/components';
+
+function VerticalTabsExample() {
+  return (
+    <Tabs style="Filled" type="Vertical">
+      <div style={{ display: 'flex', minHeight: '400px' }}>
+        <div style={{ 
+          width: '200px', 
+          borderRight: '1px solid #e0e0e0',
+          padding: '8px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '4px'
+        }}>
+          <TabItem value="account" defaultTab style={{ justifyContent: 'flex-start', width: '100%' }}>
+            👤 Account
+          </TabItem>
+          <TabItem value="security" style={{ justifyContent: 'flex-start', width: '100%' }}>
+            🔒 Security
+          </TabItem>
+          <TabItem value="notifications" style={{ justifyContent: 'flex-start', width: '100%' }}>
+            🔔 Notifications
+          </TabItem>
+          <TabItem value="privacy" style={{ justifyContent: 'flex-start', width: '100%' }}>
+            🛡️ Privacy
+          </TabItem>
+          <TabItem value="billing" style={{ justifyContent: 'flex-start', width: '100%' }}>
+            💳 Billing
+          </TabItem>
+          <TabItem value="advanced" style={{ justifyContent: 'flex-start', width: '100%' }}>
+            ⚙️ Advanced
+          </TabItem>
+        </div>
+        
+        <div style={{ flex: 1 }}>
+          <TabContent value="account">
+            <div style={{ padding: '24px' }}>
+              <h2>Account Settings</h2>
+              <Text>Manage your personal account information and preferences.</Text>
+              <div style={{ marginTop: '24px', display: 'grid', gap: '16px' }}>
+                <div>
+                  <label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>
+                    Display Name
+                  </label>
+                  <input 
+                    type="text" 
+                    defaultValue="John Doe"
+                    style={{ 
+                      width: '100%', 
+                      padding: '8px 12px', 
+                      border: '1px solid #ccc', 
+                      borderRadius: '4px' 
+                    }} 
+                  />
+                </div>
+                <div>
+                  <label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>
+                    Email Address
+                  </label>
+                  <input 
+                    type="email" 
+                    defaultValue="john.doe@example.com"
+                    style={{ 
+                      width: '100%', 
+                      padding: '8px 12px', 
+                      border: '1px solid #ccc', 
+                      borderRadius: '4px' 
+                    }} 
+                  />
+                </div>
+                <div>
+                  <label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>
+                    Time Zone
+                  </label>
+                  <select style={{ 
+                    width: '100%', 
+                    padding: '8px 12px', 
+                    border: '1px solid #ccc', 
+                    borderRadius: '4px' 
+                  }}>
+                    <option>UTC-8 (Pacific Time)</option>
+                    <option>UTC-5 (Eastern Time)</option>
+                    <option>UTC+0 (Greenwich Mean Time)</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </TabContent>
+          
+          <TabContent value="security">
+            <div style={{ padding: '24px' }}>
+              <h2>Security Settings</h2>
+              <Text>Configure security options to protect your account.</Text>
+              <div style={{ marginTop: '24px', display: 'grid', gap: '20px' }}>
+                <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                  <h4>Two-Factor Authentication</h4>
+                  <Text size="Small" color="secondary">
+                    Add an extra layer of security to your account
+                  </Text>
+                  <button style={{ 
+                    marginTop: '8px', 
+                    padding: '8px 16px', 
+                    backgroundColor: '#4caf50', 
+                    color: 'white', 
+                    border: 'none', 
+                    borderRadius: '4px' 
+                  }}>
+                    Enable 2FA
+                  </button>
+                </div>
+                <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                  <h4>Login Sessions</h4>
+                  <Text size="Small" color="secondary">
+                    Manage your active login sessions
+                  </Text>
+                  <button style={{ 
+                    marginTop: '8px', 
+                    padding: '8px 16px', 
+                    backgroundColor: '#f44336', 
+                    color: 'white', 
+                    border: 'none', 
+                    borderRadius: '4px' 
+                  }}>
+                    View Sessions
+                  </button>
+                </div>
+              </div>
+            </div>
+          </TabContent>
+          
+          <TabContent value="notifications">
+            <div style={{ padding: '24px' }}>
+              <h2>Notification Preferences</h2>
+              <Text>Choose how you want to be notified about updates and activities.</Text>
+              <div style={{ marginTop: '24px', display: 'grid', gap: '16px' }}>
+                <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                  <input type="checkbox" defaultChecked />
+                  Email notifications for new messages
+                </label>
+                <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                  <input type="checkbox" defaultChecked />
+                  Push notifications on mobile devices
+                </label>
+                <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                  <input type="checkbox" />
+                  Weekly summary emails
+                </label>
+                <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                  <input type="checkbox" />
+                  Marketing and promotional emails
+                </label>
+              </div>
+            </div>
+          </TabContent>
+          
+          <TabContent value="privacy">
+            <div style={{ padding: '24px' }}>
+              <h2>Privacy Controls</h2>
+              <Text>Manage your privacy settings and data sharing preferences.</Text>
+              <div style={{ marginTop: '24px', display: 'grid', gap: '20px' }}>
+                <div>
+                  <h4>Profile Visibility</h4>
+                  <select style={{ 
+                    width: '100%', 
+                    padding: '8px 12px', 
+                    border: '1px solid #ccc', 
+                    borderRadius: '4px',
+                    marginTop: '8px'
+                  }}>
+                    <option>Public</option>
+                    <option>Friends Only</option>
+                    <option>Private</option>
+                  </select>
+                </div>
+                <div>
+                  <h4>Data Collection</h4>
+                  <label style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '8px' }}>
+                    <input type="checkbox" />
+                    Allow analytics data collection
+                  </label>
+                  <label style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '8px' }}>
+                    <input type="checkbox" />
+                    Share usage data for product improvement
+                  </label>
+                </div>
+              </div>
+            </div>
+          </TabContent>
+          
+          <TabContent value="billing">
+            <div style={{ padding: '24px' }}>
+              <h2>Billing Information</h2>
+              <Text>Manage your subscription and payment methods.</Text>
+              <div style={{ marginTop: '24px', display: 'grid', gap: '20px' }}>
+                <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                  <h4>Current Plan</h4>
+                  <Text>Professional Plan - $29/month</Text>
+                  <button style={{ 
+                    marginTop: '8px', 
+                    padding: '8px 16px', 
+                    backgroundColor: '#2196f3', 
+                    color: 'white', 
+                    border: 'none', 
+                    borderRadius: '4px' 
+                  }}>
+                    Change Plan
+                  </button>
+                </div>
+                <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                  <h4>Payment Method</h4>
+                  <Text>•••• •••• •••• 1234 (Expires 12/25)</Text>
+                  <button style={{ 
+                    marginTop: '8px', 
+                    padding: '8px 16px', 
+                    backgroundColor: '#ff9800', 
+                    color: 'white', 
+                    border: 'none', 
+                    borderRadius: '4px' 
+                  }}>
+                    Update Payment
+                  </button>
+                </div>
+              </div>
+            </div>
+          </TabContent>
+          
+          <TabContent value="advanced">
+            <div style={{ padding: '24px' }}>
+              <h2>Advanced Settings</h2>
+              <Text>Configure advanced options and developer settings.</Text>
+              <div style={{ marginTop: '24px', display: 'grid', gap: '20px' }}>
+                <div style={{ padding: '16px', border: '1px solid #ffebee', borderRadius: '8px' }}>
+                  <h4 style={{ color: '#d32f2f' }}>Danger Zone</h4>
+                  <Text size="Small" color="secondary">
+                    These actions cannot be undone
+                  </Text>
+                  <div style={{ marginTop: '12px', display: 'flex', gap: '8px' }}>
+                    <button style={{ 
+                      padding: '8px 16px', 
+                      backgroundColor: '#f44336', 
+                      color: 'white', 
+                      border: 'none', 
+                      borderRadius: '4px' 
+                    }}>
+                      Delete Account
+                    </button>
+                    <button style={{ 
+                      padding: '8px 16px', 
+                      backgroundColor: '#ff9800', 
+                      color: 'white', 
+                      border: 'none', 
+                      borderRadius: '4px' 
+                    }}>
+                      Export Data
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </TabContent>
+        </div>
+      </div>
+    </Tabs>
+  );
+}
+```
+
+### Tabs with Custom Click Handlers
+
+```tsx
+import { Tabs, TabItem, TabContent, Text, Button } from '@delightui/components';
+
+function CustomClickHandlerTabsExample() {
+  const [analytics, setAnalytics] = useState({
+    totalClicks: 0,
+    tabClicks: {} as Record<string, number>,
+    lastClickedTab: '',
+    clickHistory: [] as string[]
+  });
+
+  const handleTabClick = (value: string | number) => {
+    const tabValue = value.toString();
+    
+    setAnalytics(prev => ({
+      totalClicks: prev.totalClicks + 1,
+      tabClicks: {
+        ...prev.tabClicks,
+        [tabValue]: (prev.tabClicks[tabValue] || 0) + 1
+      },
+      lastClickedTab: tabValue,
+      clickHistory: [...prev.clickHistory.slice(-9), tabValue] // Keep last 10 clicks
+    }));
+    
+    // Custom analytics or tracking
+    console.log(`Tab clicked: ${tabValue}`);
+  };
+
+  const resetAnalytics = () => {
+    setAnalytics({
+      totalClicks: 0,
+      tabClicks: {},
+      lastClickedTab: '',
+      clickHistory: []
+    });
+  };
+
+  const getPopularityPercentage = (tabValue: string) => {
+    if (analytics.totalClicks === 0) return 0;
+    return Math.round(((analytics.tabClicks[tabValue] || 0) / analytics.totalClicks) * 100);
+  };
+
+  return (
+    <div>
+      {/* Analytics Dashboard */}
+      <div style={{ 
+        marginBottom: '24px', 
+        padding: '16px', 
+        backgroundColor: '#f5f5f5', 
+        borderRadius: '8px' 
+      }}>
+        <h3>Tab Analytics Dashboard</h3>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px', marginTop: '12px' }}>
+          <div>
+            <Text size="Small" color="secondary">Total Clicks</Text>
+            <Text size="Large" weight="Bold">{analytics.totalClicks}</Text>
+          </div>
+          <div>
+            <Text size="Small" color="secondary">Last Clicked</Text>
+            <Text weight="Bold">{analytics.lastClickedTab || 'None'}</Text>
+          </div>
+          <div>
+            <Text size="Small" color="secondary">Most Popular</Text>
+            <Text weight="Bold">
+              {Object.entries(analytics.tabClicks).length > 0 
+                ? Object.entries(analytics.tabClicks).reduce((a, b) => a[1] > b[1] ? a : b)[0]
+                : 'None'
+              }
+            </Text>
+          </div>
+        </div>
+        
+        {analytics.clickHistory.length > 0 && (
+          <div style={{ marginTop: '12px' }}>
+            <Text size="Small" color="secondary">Recent Click History:</Text>
+            <div style={{ display: 'flex', gap: '4px', marginTop: '4px', flexWrap: 'wrap' }}>
+              {analytics.clickHistory.map((tab, index) => (
+                <span 
+                  key={index}
+                  style={{ 
+                    padding: '2px 6px', 
+                    backgroundColor: '#e0e0e0', 
+                    borderRadius: '12px', 
+                    fontSize: '12px' 
+                  }}
+                >
+                  {tab}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+        
+        <Button size="Small" type="Outlined" onClick={resetAnalytics} style={{ marginTop: '12px' }}>
+          Reset Analytics
+        </Button>
+      </div>
+
+      <Tabs style="Underlined" onClick={handleTabClick}>
+        <div style={{ display: 'flex' }}>
+          <TabItem value="home" defaultTab>
+            Home ({analytics.tabClicks.home || 0})
+          </TabItem>
+          <TabItem value="products">
+            Products ({analytics.tabClicks.products || 0})
+          </TabItem>
+          <TabItem value="services">
+            Services ({analytics.tabClicks.services || 0})
+          </TabItem>
+          <TabItem value="about">
+            About ({analytics.tabClicks.about || 0})
+          </TabItem>
+          <TabItem value="contact">
+            Contact ({analytics.tabClicks.contact || 0})
+          </TabItem>
+        </div>
+        
+        <TabContent value="home">
+          <div style={{ padding: '24px' }}>
+            <h2>🏠 Home</h2>
+            <Text>Welcome to our home page!</Text>
+            <div style={{ marginTop: '16px', padding: '12px', backgroundColor: '#e3f2fd', borderRadius: '8px' }}>
+              <Text size="Small">
+                This tab has been clicked {analytics.tabClicks.home || 0} times 
+                ({getPopularityPercentage('home')}% of total clicks)
+              </Text>
+            </div>
+          </div>
+        </TabContent>
+        
+        <TabContent value="products">
+          <div style={{ padding: '24px' }}>
+            <h2>🛍️ Products</h2>
+            <Text>Explore our amazing product catalog!</Text>
+            <div style={{ marginTop: '16px', padding: '12px', backgroundColor: '#e8f5e8', borderRadius: '8px' }}>
+              <Text size="Small">
+                This tab has been clicked {analytics.tabClicks.products || 0} times 
+                ({getPopularityPercentage('products')}% of total clicks)
+              </Text>
+            </div>
+          </div>
+        </TabContent>
+        
+        <TabContent value="services">
+          <div style={{ padding: '24px' }}>
+            <h2>🛠️ Services</h2>
+            <Text>Discover our comprehensive service offerings!</Text>
+            <div style={{ marginTop: '16px', padding: '12px', backgroundColor: '#fff3e0', borderRadius: '8px' }}>
+              <Text size="Small">
+                This tab has been clicked {analytics.tabClicks.services || 0} times 
+                ({getPopularityPercentage('services')}% of total clicks)
+              </Text>
+            </div>
+          </div>
+        </TabContent>
+        
+        <TabContent value="about">
+          <div style={{ padding: '24px' }}>
+            <h2>ℹ️ About Us</h2>
+            <Text>Learn more about our company and mission!</Text>
+            <div style={{ marginTop: '16px', padding: '12px', backgroundColor: '#f3e5f5', borderRadius: '8px' }}>
+              <Text size="Small">
+                This tab has been clicked {analytics.tabClicks.about || 0} times 
+                ({getPopularityPercentage('about')}% of total clicks)
+              </Text>
+            </div>
+          </div>
+        </TabContent>
+        
+        <TabContent value="contact">
+          <div style={{ padding: '24px' }}>
+            <h2>📞 Contact Us</h2>
+            <Text>Get in touch with our team!</Text>
+            <div style={{ marginTop: '16px', padding: '12px', backgroundColor: '#ffebee', borderRadius: '8px' }}>
+              <Text size="Small">
+                This tab has been clicked {analytics.tabClicks.contact || 0} times 
+                ({getPopularityPercentage('contact')}% of total clicks)
+              </Text>
+            </div>
+          </div>
+        </TabContent>
+      </Tabs>
+    </div>
+  );
+}
+```
+
+### Tabs with Dynamic Content
+
+```tsx
+import { Tabs, TabItem, TabContent, Text, Button, Spinner } from '@delightui/components';
+
+function DynamicContentTabsExample() {
+  const [activeTab, setActiveTab] = useState('dashboard');
+  const [data, setData] = useState({
+    dashboard: { loaded: true, content: 'Dashboard data ready!' },
+    analytics: { loaded: false, content: null },
+    reports: { loaded: false, content: null },
+    settings: { loaded: true, content: 'Settings loaded!' }
+  });
+  
+  const [loading, setLoading] = useState(false);
+
+  const loadTabData = async (tabValue: string) => {
+    if (data[tabValue as keyof typeof data].loaded) return;
+    
+    setLoading(true);
+    
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    
+    setData(prev => ({
+      ...prev,
+      [tabValue]: {
+        loaded: true,
+        content: `${tabValue.charAt(0).toUpperCase() + tabValue.slice(1)} data loaded successfully!`
+      }
+    }));
+    
+    setLoading(false);
+  };
+
+  const handleTabClick = (value: string | number) => {
+    const tabValue = value.toString();
+    setActiveTab(tabValue);
+    loadTabData(tabValue);
+  };
+
+  const refreshData = (tabValue: string) => {
+    setData(prev => ({
+      ...prev,
+      [tabValue]: { loaded: false, content: null }
+    }));
+    loadTabData(tabValue);
+  };
+
+  return (
+    <Tabs style="Filled" onClick={handleTabClick}>
+      <div style={{ display: 'flex', backgroundColor: '#f5f5f5', borderRadius: '8px', padding: '4px' }}>
+        <TabItem value="dashboard" defaultTab>
+          📊 Dashboard
+          {data.dashboard.loaded && <span style={{ marginLeft: '4px' }}>✓</span>}
+        </TabItem>
+        <TabItem value="analytics">
+          📈 Analytics
+          {loading && activeTab === 'analytics' && <Spinner size="Small" style={{ marginLeft: '8px' }} />}
+          {data.analytics.loaded && <span style={{ marginLeft: '4px' }}>✓</span>}
+        </TabItem>
+        <TabItem value="reports">
+          📋 Reports
+          {loading && activeTab === 'reports' && <Spinner size="Small" style={{ marginLeft: '8px' }} />}
+          {data.reports.loaded && <span style={{ marginLeft: '4px' }}>✓</span>}
+        </TabItem>
+        <TabItem value="settings">
+          ⚙️ Settings
+          {data.settings.loaded && <span style={{ marginLeft: '4px' }}>✓</span>}
+        </TabItem>
+      </div>
+      
+      <TabContent value="dashboard">
+        <div style={{ padding: '24px' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
+            <h2>Dashboard</h2>
+            <Button size="Small" type="Outlined" onClick={() => refreshData('dashboard')}>
+              Refresh
+            </Button>
+          </div>
+          <Text>{data.dashboard.content}</Text>
+          
+          {data.dashboard.loaded && (
+            <div style={{ 
+              display: 'grid', 
+              gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', 
+              gap: '16px', 
+              marginTop: '20px' 
+            }}>
+              <div style={{ padding: '20px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                <Text size="Large" weight="Bold">2,543</Text>
+                <Text color="secondary">Total Users</Text>
+              </div>
+              <div style={{ padding: '20px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                <Text size="Large" weight="Bold">$45,678</Text>
+                <Text color="secondary">Revenue</Text>
+              </div>
+              <div style={{ padding: '20px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                <Text size="Large" weight="Bold">89%</Text>
+                <Text color="secondary">Satisfaction</Text>
+              </div>
+            </div>
+          )}
+        </div>
+      </TabContent>
+      
+      <TabContent value="analytics">
+        <div style={{ padding: '24px' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
+            <h2>Analytics</h2>
+            {data.analytics.loaded && (
+              <Button size="Small" type="Outlined" onClick={() => refreshData('analytics')}>
+                Refresh
+              </Button>
+            )}
+          </div>
+          
+          {loading && activeTab === 'analytics' ? (
+            <div style={{ textAlign: 'center', padding: '40px' }}>
+              <Spinner />
+              <Text style={{ marginTop: '16px' }}>Loading analytics data...</Text>
+            </div>
+          ) : data.analytics.loaded ? (
+            <div>
+              <Text>{data.analytics.content}</Text>
+              <div style={{ 
+                marginTop: '20px', 
+                height: '200px', 
+                border: '1px solid #e0e0e0', 
+                borderRadius: '8px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: '#f9f9f9'
+              }}>
+                <Text color="secondary">[Analytics Chart Placeholder]</Text>
+              </div>
+            </div>
+          ) : (
+            <div style={{ textAlign: 'center', padding: '40px' }}>
+              <Text>Click this tab to load analytics data.</Text>
+            </div>
+          )}
+        </div>
+      </TabContent>
+      
+      <TabContent value="reports">
+        <div style={{ padding: '24px' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
+            <h2>Reports</h2>
+            {data.reports.loaded && (
+              <Button size="Small" type="Outlined" onClick={() => refreshData('reports')}>
+                Refresh
+              </Button>
+            )}
+          </div>
+          
+          {loading && activeTab === 'reports' ? (
+            <div style={{ textAlign: 'center', padding: '40px' }}>
+              <Spinner />
+              <Text style={{ marginTop: '16px' }}>Generating reports...</Text>
+            </div>
+          ) : data.reports.loaded ? (
+            <div>
+              <Text>{data.reports.content}</Text>
+              <div style={{ marginTop: '20px', display: 'grid', gap: '12px' }}>
+                <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                  <Text weight="Bold">Monthly Sales Report</Text>
+                  <Text size="Small" color="secondary">Generated just now</Text>
+                </div>
+                <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                  <Text weight="Bold">User Activity Report</Text>
+                  <Text size="Small" color="secondary">Generated just now</Text>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div style={{ textAlign: 'center', padding: '40px' }}>
+              <Text>Click this tab to generate reports.</Text>
+            </div>
+          )}
+        </div>
+      </TabContent>
+      
+      <TabContent value="settings">
+        <div style={{ padding: '24px' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
+            <h2>Settings</h2>
+            <Button size="Small" type="Outlined" onClick={() => refreshData('settings')}>
+              Refresh
+            </Button>
+          </div>
+          <Text>{data.settings.content}</Text>
+          
+          {data.settings.loaded && (
+            <div style={{ marginTop: '20px', display: 'grid', gap: '16px' }}>
+              <div>
+                <label style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}>
+                  Application Theme
+                </label>
+                <select style={{ 
+                  width: '200px', 
+                  padding: '8px 12px', 
+                  border: '1px solid #ccc', 
+                  borderRadius: '4px' 
+                }}>
+                  <option>Light</option>
+                  <option>Dark</option>
+                  <option>Auto</option>
+                </select>
+              </div>
+              <div>
+                <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                  <input type="checkbox" defaultChecked />
+                  Enable notifications
+                </label>
+              </div>
+              <div>
+                <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                  <input type="checkbox" />
+                  Auto-save changes
+                </label>
+              </div>
+            </div>
+          )}
+        </div>
+      </TabContent>
+    </Tabs>
+  );
+}
+```
+
+### Responsive Tabs with Mobile Adaptation
+
+```tsx
+import { Tabs, TabItem, TabContent, Text } from '@delightui/components';
+
+function ResponsiveTabsExample() {
+  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
+  const [isTablet, setIsTablet] = useState(window.innerWidth >= 768 && window.innerWidth < 1024);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768);
+      setIsTablet(window.innerWidth >= 768 && window.innerWidth < 1024);
+    };
+    
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const getTabStyle = () => {
+    if (isMobile) return 'Filled';
+    return 'Underlined';
+  };
+
+  const getTabType = () => {
+    if (isMobile) return 'Vertical';
+    return 'Horizontal';
+  };
+
+  return (
+    <div>
+      <div style={{ marginBottom: '16px', padding: '12px', backgroundColor: '#f0f0f0', borderRadius: '4px' }}>
+        <Text size="Small">
+          Current breakpoint: {isMobile ? 'Mobile' : isTablet ? 'Tablet' : 'Desktop'} 
+          (Resize window to see adaptive behavior)
+        </Text>
+      </div>
+
+      <Tabs style={getTabStyle()} type={getTabType()}>
+        {isMobile ? (
+          // Mobile: Vertical layout with accordion-style tabs
+          <div style={{ display: 'flex', flexDirection: 'column' }}>
+            <div style={{ 
+              display: 'flex', 
+              flexDirection: 'column', 
+              gap: '8px',
+              padding: '8px',
+              backgroundColor: '#f5f5f5',
+              borderRadius: '8px'
+            }}>
+              <TabItem 
+                value="overview" 
+                defaultTab
+                style={{ 
+                  width: '100%', 
+                  justifyContent: 'flex-start',
+                  padding: '12px 16px'
+                }}
+              >
+                📱 Overview
+              </TabItem>
+              <TabItem 
+                value="features"
+                style={{ 
+                  width: '100%', 
+                  justifyContent: 'flex-start',
+                  padding: '12px 16px'
+                }}
+              >
+                ⚡ Features
+              </TabItem>
+              <TabItem 
+                value="pricing"
+                style={{ 
+                  width: '100%', 
+                  justifyContent: 'flex-start',
+                  padding: '12px 16px'
+                }}
+              >
+                💰 Pricing
+              </TabItem>
+              <TabItem 
+                value="support"
+                style={{ 
+                  width: '100%', 
+                  justifyContent: 'flex-start',
+                  padding: '12px 16px'
+                }}
+              >
+                🎧 Support
+              </TabItem>
+            </div>
+          </div>
+        ) : (
+          // Desktop/Tablet: Horizontal layout
+          <div style={{ 
+            display: 'flex', 
+            borderBottom: '1px solid #e0e0e0',
+            overflowX: isTablet ? 'auto' : 'visible'
+          }}>
+            <TabItem value="overview" defaultTab>
+              📱 Overview
+            </TabItem>
+            <TabItem value="features">
+              ⚡ Features
+            </TabItem>
+            <TabItem value="pricing">
+              💰 Pricing
+            </TabItem>
+            <TabItem value="support">
+              🎧 Support
+            </TabItem>
+          </div>
+        )}
+        
+        <TabContent value="overview">
+          <div style={{ padding: isMobile ? '16px' : '24px' }}>
+            <h2>Product Overview</h2>
+            <Text>
+              {isMobile 
+                ? 'Mobile-optimized overview with essential information.'
+                : 'Comprehensive product overview with detailed information and features.'
+              }
+            </Text>
+            
+            <div style={{ 
+              display: 'grid', 
+              gridTemplateColumns: isMobile ? '1fr' : isTablet ? '1fr 1fr' : 'repeat(3, 1fr)', 
+              gap: '16px', 
+              marginTop: '20px' 
+            }}>
+              <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                <Text weight="Bold">Fast Performance</Text>
+                <Text size="Small">Lightning-fast loading and response times</Text>
+              </div>
+              <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                <Text weight="Bold">Easy to Use</Text>
+                <Text size="Small">Intuitive interface designed for all users</Text>
+              </div>
+              {!isMobile && (
+                <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                  <Text weight="Bold">Secure</Text>
+                  <Text size="Small">Enterprise-grade security and privacy</Text>
+                </div>
+              )}
+            </div>
+          </div>
+        </TabContent>
+        
+        <TabContent value="features">
+          <div style={{ padding: isMobile ? '16px' : '24px' }}>
+            <h2>Key Features</h2>
+            <Text>
+              Discover the powerful features that make our product exceptional.
+            </Text>
+            
+            <div style={{ marginTop: '20px' }}>
+              {isMobile ? (
+                // Mobile: Simplified feature list
+                <div style={{ display: 'grid', gap: '12px' }}>
+                  <div style={{ padding: '12px', backgroundColor: '#f5f5f5', borderRadius: '6px' }}>
+                    <Text weight="Bold">✨ Smart Automation</Text>
+                  </div>
+                  <div style={{ padding: '12px', backgroundColor: '#f5f5f5', borderRadius: '6px' }}>
+                    <Text weight="Bold">📊 Advanced Analytics</Text>
+                  </div>
+                  <div style={{ padding: '12px', backgroundColor: '#f5f5f5', borderRadius: '6px' }}>
+                    <Text weight="Bold">🔒 Security First</Text>
+                  </div>
+                </div>
+              ) : (
+                // Desktop: Detailed feature cards
+                <div style={{ display: 'grid', gridTemplateColumns: isTablet ? '1fr' : '1fr 1fr', gap: '20px' }}>
+                  <div style={{ padding: '20px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                    <h4>✨ Smart Automation</h4>
+                    <Text>Automate repetitive tasks and workflows with intelligent algorithms.</Text>
+                  </div>
+                  <div style={{ padding: '20px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                    <h4>📊 Advanced Analytics</h4>
+                    <Text>Get deep insights with comprehensive analytics and reporting tools.</Text>
+                  </div>
+                  <div style={{ padding: '20px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                    <h4>🔒 Security First</h4>
+                    <Text>Bank-level security with end-to-end encryption and privacy controls.</Text>
+                  </div>
+                  <div style={{ padding: '20px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                    <h4>🌐 Global Scale</h4>
+                    <Text>Built to scale globally with high availability and performance.</Text>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </TabContent>
+        
+        <TabContent value="pricing">
+          <div style={{ padding: isMobile ? '16px' : '24px' }}>
+            <h2>Pricing Plans</h2>
+            <Text>Choose the plan that best fits your needs.</Text>
+            
+            <div style={{ 
+              display: 'grid', 
+              gridTemplateColumns: isMobile ? '1fr' : isTablet ? '1fr 1fr' : 'repeat(3, 1fr)', 
+              gap: '16px', 
+              marginTop: '20px' 
+            }}>
+              <div style={{ 
+                padding: '20px', 
+                border: '1px solid #e0e0e0', 
+                borderRadius: '8px',
+                textAlign: 'center'
+              }}>
+                <h4>Starter</h4>
+                <Text size="Large" weight="Bold">$9/month</Text>
+                <Text size="Small">Perfect for individuals</Text>
+              </div>
+              <div style={{ 
+                padding: '20px', 
+                border: '2px solid #2196f3', 
+                borderRadius: '8px',
+                textAlign: 'center',
+                backgroundColor: '#f8f9ff'
+              }}>
+                <h4>Professional</h4>
+                <Text size="Large" weight="Bold">$29/month</Text>
+                <Text size="Small">Best for teams</Text>
+              </div>
+              {!isMobile && (
+                <div style={{ 
+                  padding: '20px', 
+                  border: '1px solid #e0e0e0', 
+                  borderRadius: '8px',
+                  textAlign: 'center'
+                }}>
+                  <h4>Enterprise</h4>
+                  <Text size="Large" weight="Bold">$99/month</Text>
+                  <Text size="Small">For large organizations</Text>
+                </div>
+              )}
+            </div>
+          </div>
+        </TabContent>
+        
+        <TabContent value="support">
+          <div style={{ padding: isMobile ? '16px' : '24px' }}>
+            <h2>Customer Support</h2>
+            <Text>We're here to help you succeed with our product.</Text>
+            
+            <div style={{ 
+              display: 'grid', 
+              gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', 
+              gap: '16px', 
+              marginTop: '20px' 
+            }}>
+              <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                <h4>📧 Email Support</h4>
+                <Text size="Small">Get help via email within 24 hours</Text>
+              </div>
+              <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                <h4>💬 Live Chat</h4>
+                <Text size="Small">Real-time support during business hours</Text>
+              </div>
+              {!isMobile && (
+                <>
+                  <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                    <h4>📞 Phone Support</h4>
+                    <Text size="Small">Direct phone support for urgent issues</Text>
+                  </div>
+                  <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
+                    <h4>📚 Knowledge Base</h4>
+                    <Text size="Small">Self-service documentation and guides</Text>
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        </TabContent>
+      </Tabs>
+    </div>
+  );
+}
+```
+
+### Tabs with Nested Navigation
+
+```tsx
+import { Tabs, TabItem, TabContent, Text } from '@delightui/components';
+
+function NestedTabsExample() {
+  return (
+    <Tabs style="Underlined">
+      <div style={{ borderBottom: '1px solid #e0e0e0' }}>
+        <TabItem value="development" defaultTab>Development</TabItem>
+        <TabItem value="design">Design</TabItem>
+        <TabItem value="marketing">Marketing</TabItem>
+        <TabItem value="operations">Operations</TabItem>
+      </div>
+      
+      <TabContent value="development">
+        <div style={{ padding: '20px' }}>
+          <h2>Development Team</h2>
+          
+          {/* Nested Tabs for Development */}
+          <Tabs style="Filled">
+            <div style={{ display: 'flex', gap: '4px', marginTop: '16px' }}>
+              <TabItem value="frontend" defaultTab>Frontend</TabItem>
+              <TabItem value="backend">Backend</TabItem>
+              <TabItem value="mobile">Mobile</TabItem>
+              <TabItem value="devops">DevOps</TabItem>
+            </div>
+            
+            <TabContent value="frontend">
+              <div style={{ padding: '20px' }}>
+                <h3>Frontend Development</h3>
+                <Text>Building beautiful and responsive user interfaces.</Text>
+                <div style={{ marginTop: '16px' }}>
+                  <h4>Current Projects:</h4>
+                  <ul style={{ marginTop: '8px' }}>
+                    <li>React Dashboard Redesign</li>
+                    <li>Mobile App UI Components</li>
+                    <li>Accessibility Improvements</li>
+                  </ul>
+                </div>
+                <div style={{ marginTop: '16px' }}>
+                  <h4>Technologies:</h4>
+                  <div style={{ display: 'flex', gap: '8px', marginTop: '8px' }}>
+                    <span style={{ padding: '4px 8px', backgroundColor: '#e3f2fd', borderRadius: '4px' }}>React</span>
+                    <span style={{ padding: '4px 8px', backgroundColor: '#e3f2fd', borderRadius: '4px' }}>TypeScript</span>
+                    <span style={{ padding: '4px 8px', backgroundColor: '#e3f2fd', borderRadius: '4px' }}>CSS</span>
+                  </div>
+                </div>
+              </div>
+            </TabContent>
+            
+            <TabContent value="backend">
+              <div style={{ padding: '20px' }}>
+                <h3>Backend Development</h3>
+                <Text>Robust server-side solutions and APIs.</Text>
+                <div style={{ marginTop: '16px' }}>
+                  <h4>Current Projects:</h4>
+                  <ul style={{ marginTop: '8px' }}>
+                    <li>API Gateway Implementation</li>
+                    <li>Database Optimization</li>
+                    <li>Microservices Migration</li>
+                  </ul>
+                </div>
+                <div style={{ marginTop: '16px' }}>
+                  <h4>Technologies:</h4>
+                  <div style={{ display: 'flex', gap: '8px', marginTop: '8px' }}>
+                    <span style={{ padding: '4px 8px', backgroundColor: '#e8f5e8', borderRadius: '4px' }}>Node.js</span>
+                    <span style={{ padding: '4px 8px', backgroundColor: '#e8f5e8', borderRadius: '4px' }}>Python</span>
+                    <span style={{ padding: '4px 8px', backgroundColor: '#e8f5e8', borderRadius: '4px' }}>PostgreSQL</span>
+                  </div>
+                </div>
+              </div>
+            </TabContent>
+            
+            <TabContent value="mobile">
+              <div style={{ padding: '20px' }}>
+                <h3>Mobile Development</h3>
+                <Text>Native and cross-platform mobile applications.</Text>
+                <div style={{ marginTop: '16px' }}>
+                  <h4>Current Projects:</h4>
+                  <ul style={{ marginTop: '8px' }}>
+                    <li>iOS App Store Update</li>
+                    <li>Android Performance Optimization</li>
+                    <li>React Native Integration</li>
+                  </ul>
+                </div>
+              </div>
+            </TabContent>
+            
+            <TabContent value="devops">
+              <div style={{ padding: '20px' }}>
+                <h3>DevOps & Infrastructure</h3>
+                <Text>Deployment, monitoring, and infrastructure management.</Text>
+                <div style={{ marginTop: '16px' }}>
+                  <h4>Current Projects:</h4>
+                  <ul style={{ marginTop: '8px' }}>
+                    <li>CI/CD Pipeline Enhancement</li>
+                    <li>Kubernetes Migration</li>
+                    <li>Monitoring Dashboard</li>
+                  </ul>
+                </div>
+              </div>
+            </TabContent>
+          </Tabs>
+        </div>
+      </TabContent>
+      
+      <TabContent value="design">
+        <div style={{ padding: '20px' }}>
+          <h2>Design Team</h2>
+          
+          {/* Nested Tabs for Design */}
+          <Tabs style="Filled">
+            <div style={{ display: 'flex', gap: '4px', marginTop: '16px' }}>
+              <TabItem value="ux" defaultTab>UX Design</TabItem>
+              <TabItem value="ui">UI Design</TabItem>
+              <TabItem value="research">Research</TabItem>
+              <TabItem value="branding">Branding</TabItem>
+            </div>
+            
+            <TabContent value="ux">
+              <div style={{ padding: '20px' }}>
+                <h3>User Experience Design</h3>
+                <Text>Creating intuitive and user-friendly experiences.</Text>
+                <div style={{ marginTop: '16px' }}>
+                  <h4>Current Projects:</h4>
+                  <ul style={{ marginTop: '8px' }}>
+                    <li>User Journey Mapping</li>
+                    <li>Usability Testing</li>
+                    <li>Information Architecture</li>
+                  </ul>
+                </div>
+              </div>
+            </TabContent>
+            
+            <TabContent value="ui">
+              <div style={{ padding: '20px' }}>
+                <h3>User Interface Design</h3>
+                <Text>Beautiful and functional visual designs.</Text>
+                <div style={{ marginTop: '16px' }}>
+                  <h4>Current Projects:</h4>
+                  <ul style={{ marginTop: '8px' }}>
+                    <li>Design System Updates</li>
+                    <li>Component Library</li>
+                    <li>Visual Style Guide</li>
+                  </ul>
+                </div>
+              </div>
+            </TabContent>
+            
+            <TabContent value="research">
+              <div style={{ padding: '20px' }}>
+                <h3>User Research</h3>
+                <Text>Data-driven insights to guide design decisions.</Text>
+                <div style={{ marginTop: '16px' }}>
+                  <h4>Current Projects:</h4>
+                  <ul style={{ marginTop: '8px' }}>
+                    <li>User Interview Sessions</li>
+                    <li>A/B Testing Analysis</li>
+                    <li>Market Research Study</li>
+                  </ul>
+                </div>
+              </div>
+            </TabContent>
+            
+            <TabContent value="branding">
+              <div style={{ padding: '20px' }}>
+                <h3>Brand Design</h3>
+                <Text>Maintaining consistent brand identity across all touchpoints.</Text>
+                <div style={{ marginTop: '16px' }}>
+                  <h4>Current Projects:</h4>
+                  <ul style={{ marginTop: '8px' }}>
+                    <li>Brand Guidelines Update</li>
+                    <li>Marketing Collateral</li>
+                    <li>Logo Refresh</li>
+                  </ul>
+                </div>
+              </div>
+            </TabContent>
+          </Tabs>
+        </div>
+      </TabContent>
+      
+      <TabContent value="marketing">
+        <div style={{ padding: '20px' }}>
+          <h2>Marketing Team</h2>
+          <Text>Driving growth through strategic marketing initiatives.</Text>
+          <div style={{ marginTop: '20px' }}>
+            <h4>Key Focus Areas:</h4>
+            <ul style={{ marginTop: '8px' }}>
+              <li>Digital Marketing Campaigns</li>
+              <li>Content Strategy</li>
+              <li>Social Media Management</li>
+              <li>Analytics and Performance</li>
+            </ul>
+          </div>
+        </div>
+      </TabContent>
+      
+      <TabContent value="operations">
+        <div style={{ padding: '20px' }}>
+          <h2>Operations Team</h2>
+          <Text>Ensuring smooth day-to-day operations and business processes.</Text>
+          <div style={{ marginTop: '20px' }}>
+            <h4>Key Responsibilities:</h4>
+            <ul style={{ marginTop: '8px' }}>
+              <li>Process Optimization</li>
+              <li>Quality Assurance</li>
+              <li>Resource Management</li>
+              <li>Performance Monitoring</li>
+            </ul>
+          </div>
+        </div>
+      </TabContent>
+    </Tabs>
+  );
+}
+```