Glass Morphic Tabs

import React, { useState } from 'react';
import GlassMorphicTabs from '../components/ui/glass-morphic-tabs';

export default function Demo() {
  const [activeTab, setActiveTab] = useState(0);

  const tabs = [
    { label: 'Dashboard', status: 'online', badge: '3' },
    { label: 'Analytics', status: 'busy', badge: '12' },
    { label: 'Users', status: 'away', badge: '247' },
    { label: 'Settings', status: 'offline' },
    { label: 'Reports', status: 'online', badge: '5' },
    { label: 'Messages', status: 'busy', badge: '99+' }
  ];

  const handleTabChange = (index: number) => {
    setActiveTab(index);
  };

  return (
    <div style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      minHeight: '100vh',
      padding: '40px 20px',
      background: '#0a0a0a'
    }}>
      <GlassMorphicTabs
        tabs={tabs}
        activeTab={activeTab}
        onTabChange={handleTabChange}
        showStatusDots={true}
        variant="premium"
        size="medium"
        showGlow={false}
        magneticStrength={0.6}
      />
    </div>
  );
}