Layout-Beispiele

Diese Seite enthält interaktive Beispiele für die Verwendung der Layout-Komponenten von Smolitux UI in realen Anwendungsfällen.

Responsive Dashboard-Layout

Dieses Beispiel zeigt ein responsives Dashboard-Layout mit Sidebar, Header und Content-Bereich.

function DashboardLayout() {
  const [sidebarOpen, setSidebarOpen] = React.useState(true);
  const [activeItem, setActiveItem] = React.useState('dashboard');
  
  // Simulierte Daten für das Dashboard
  const stats = [
    { id: 1, title: 'Gesamtumsatz', value: '€24,567', change: '+12%', trend: 'up' },
    { id: 2, title: 'Neue Benutzer', value: '1,234', change: '+7.8%', trend: 'up' },
    { id: 3, title: 'Bestellungen', value: '567', change: '-2.3%', trend: 'down' },
    { id: 4, title: 'Conversion Rate', value: '3.2%', change: '+0.8%', trend: 'up' },
  ];
  
  const recentActivity = [
    { id: 1, user: 'Max Mustermann', action: 'hat eine Bestellung aufgegeben', time: 'vor 5 Minuten' },
    { id: 2, user: 'Anna Schmidt', action: 'hat sich registriert', time: 'vor 12 Minuten' },
    { id: 3, user: 'Thomas Müller', action: 'hat einen Kommentar hinterlassen', time: 'vor 25 Minuten' },
    { id: 4, user: 'Lisa Weber', action: 'hat ein Produkt bewertet', time: 'vor 1 Stunde' },
  ];
  
  // Sidebar-Menüpunkte
  const menuItems = [
    { id: 'dashboard', label: 'Dashboard', icon: '📊' },
    { id: 'users', label: 'Benutzer', icon: '👥' },
    { id: 'products', label: 'Produkte', icon: '📦' },
    { id: 'orders', label: 'Bestellungen', icon: '🛒' },
    { id: 'analytics', label: 'Analysen', icon: '📈' },
    { id: 'settings', label: 'Einstellungen', icon: '⚙️' },
  ];
  
  const toggleSidebar = () => {
    setSidebarOpen(!sidebarOpen);
  };
  
  return (
    <div className="min-h-screen bg-gray-100">
      {/* Header */}
      <header className="bg-white shadow-sm">
        <Flex 
          justify="space-between" 
          align="center" 
          className="px-4 py-3"
        >
          <Flex align="center" gap="sm">
            <Button 
              variant="text" 
              onClick={toggleSidebar}
              aria-label="Toggle sidebar"
            >
              ☰
            </Button>
            <h1 className="text-xl font-bold">Admin Dashboard</h1>
          </Flex>
          
          <Flex gap="md" align="center">
            <Button variant="outlined" size="sm">
              Hilfe
            </Button>
            <div className="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center">
              👤
            </div>
          </Flex>
        </Flex>
      </header>
      
      <Flex className="min-h-[calc(100vh-56px)]">
        {/* Sidebar */}
        {sidebarOpen && (
          <div className="w-64 bg-white shadow-sm p-4">
            <nav>
              <List>
                {menuItems.map(item => (
                  <ListItem 
                    key={item.id}
                    primary={item.label}
                    icon={<span className="text-xl">{item.icon}</span>}
                    className={`rounded cursor-pointer ${activeItem === item.id ? 'bg-blue-50 text-blue-600' : 'hover:bg-gray-50'}`}
                    onClick={() => setActiveItem(item.id)}
                  />
                ))}
              </List>
            </nav>
          </div>
        )}
        
        {/* Main Content */}
        <div className={`flex-1 p-6 ${sidebarOpen ? '' : 'ml-0'}`}>
          <div className="mb-6">
            <h2 className="text-2xl font-bold mb-2">Dashboard</h2>
            <p className="text-gray-600">Willkommen zurück! Hier ist ein Überblick über Ihre Daten.</p>
          </div>
          
          {/* Stats Cards */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            {stats.map(stat => (
              <div key={stat.id} className="bg-white p-6 rounded-lg shadow-sm">
                <h3 className="text-gray-500 text-sm font-medium mb-1">{stat.title}</h3>
                <div className="flex items-baseline">
                  <span className="text-2xl font-bold">{stat.value}</span>
                  <span className={`ml-2 text-sm ${stat.trend === 'up' ? 'text-green-500' : 'text-red-500'}`}>
                    {stat.change}
                  </span>
                </div>
              </div>
            ))}
          </div>
          
          {/* Recent Activity */}
          <div className="bg-white rounded-lg shadow-sm p-6 mb-8">
            <h3 className="text-lg font-bold mb-4">Neueste Aktivitäten</h3>
            <List>
              {recentActivity.map(activity => (
                <ListItem 
                  key={activity.id}
                  primary={activity.user}
                  secondary={`${activity.action} • ${activity.time}`}
                  divider
                />
              ))}
            </List>
          </div>
          
          {/* Charts Placeholder */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <div className="bg-white rounded-lg shadow-sm p-6 h-64 flex items-center justify-center">
              <div className="text-center">
                <div className="text-4xl mb-2">📊</div>
                <p className="text-gray-500">Umsatzdiagramm</p>
              </div>
            </div>
            <div className="bg-white rounded-lg shadow-sm p-6 h-64 flex items-center justify-center">
              <div className="text-center">
                <div className="text-4xl mb-2">📈</div>
                <p className="text-gray-500">Benutzeraktivität</p>
              </div>
            </div>
          </div>
        </div>
      </Flex>
    </div>
  );
}

E-Commerce Produktseite

Dieses Beispiel zeigt ein Layout für eine E-Commerce-Produktseite mit Produktdetails, Bildern und verwandten Produkten.

function ProductPage() {
  // Simulierte Produktdaten
  const product = {
    id: 1,
    name: 'Premium Bluetooth Kopfhörer',
    price: 129.99,
    rating: 4.5,
    reviewCount: 127,
    description: 'Diese Premium Bluetooth Kopfhörer bieten herausragende Klangqualität, aktive Geräuschunterdrückung und bis zu 30 Stunden Akkulaufzeit. Perfekt für unterwegs und zu Hause.',
    features: [
      'Aktive Geräuschunterdrückung',
      'Bis zu 30 Stunden Akkulaufzeit',
      'Schnellladefunktion (10 Min. = 3 Std. Wiedergabe)',
      'Bluetooth 5.0 mit Multipoint-Verbindung',
      'Integrierte Mikrofone für Anrufe',
      'Komfortable Over-Ear-Polster'
    ],
    colors: ['Schwarz', 'Weiß', 'Blau'],
    images: [
      { id: 1, alt: 'Frontansicht' },
      { id: 2, alt: 'Seitenansicht' },
      { id: 3, alt: 'Detailansicht' }
    ]
  };
  
  const relatedProducts = [
    { id: 1, name: 'Bluetooth Lautsprecher', price: 89.99, rating: 4.3 },
    { id: 2, name: 'Kabellose Ohrhörer', price: 79.99, rating: 4.7 },
    { id: 3, name: 'Kopfhörer-Ständer', price: 24.99, rating: 4.2 },
    { id: 4, name: 'Ersatz-Ohrpolster', price: 19.99, rating: 4.4 }
  ];
  
  const [selectedColor, setSelectedColor] = React.useState('Schwarz');
  const [quantity, setQuantity] = React.useState(1);
  const [activeImage, setActiveImage] = React.useState(1);
  
  return (
    <div className="max-w-7xl mx-auto p-6">
      {/* Breadcrumb */}
      <div className="mb-6">
        <Flex gap="xs" className="text-sm text-gray-500">
          <a href="#" className="hover:text-gray-700">Home</a>
          <span>/</span>
          <a href="#" className="hover:text-gray-700">Elektronik</a>
          <span>/</span>
          <a href="#" className="hover:text-gray-700">Kopfhörer</a>
          <span>/</span>
          <span className="text-gray-900">{product.name}</span>
        </Flex>
      </div>
      
      {/* Product Details */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-10 mb-16">
        {/* Product Images */}
        <div>
          <div className="bg-gray-100 rounded-lg mb-4 h-96 flex items-center justify-center">
            <div className="text-6xl">🎧</div>
          </div>
          <Flex gap="sm" justify="center">
            {product.images.map(image => (
              <div 
                key={image.id}
                className={`w-20 h-20 bg-gray-100 rounded cursor-pointer flex items-center justify-center ${activeImage === image.id ? 'ring-2 ring-blue-500' : ''}`}
                onClick={() => setActiveImage(image.id)}
              >
                <div className="text-2xl">🎧</div>
              </div>
            ))}
          </Flex>
        </div>
        
        {/* Product Info */}
        <div>
          <h1 className="text-3xl font-bold mb-2">{product.name}</h1>
          
          <div className="mb-4">
            <Flex gap="sm" align="center">
              <div className="flex">
                {'★★★★☆'.split('').map((star, i) => (
                  <span key={i} className="text-yellow-400">{star}</span>
                ))}
              </div>
              <span className="text-gray-600">{product.rating} ({product.reviewCount} Bewertungen)</span>
            </Flex>
          </div>
          
          <div className="text-2xl font-bold mb-6">€{product.price.toFixed(2)}</div>
          
          <p className="text-gray-700 mb-6">{product.description}</p>
          
          {/* Color Selection */}
          <div className="mb-6">
            <h3 className="font-medium mb-2">Farbe: {selectedColor}</h3>
            <Flex gap="sm">
              {product.colors.map(color => (
                <div 
                  key={color}
                  className={`w-10 h-10 rounded-full cursor-pointer flex items-center justify-center ${selectedColor === color ? 'ring-2 ring-blue-500 ring-offset-2' : ''}`}
                  style={{ backgroundColor: color === 'Schwarz' ? '#000' : color === 'Weiß' ? '#fff' : '#3b82f6', border: color === 'Weiß' ? '1px solid #e5e7eb' : 'none' }}
                  onClick={() => setSelectedColor(color)}
                  title={color}
                />
              ))}
            </Flex>
          </div>
          
          {/* Quantity */}
          <div className="mb-6">
            <h3 className="font-medium mb-2">Menge</h3>
            <Flex align="center" gap="sm">
              <Button 
                variant="outlined" 
                onClick={() => setQuantity(Math.max(1, quantity - 1))}
                disabled={quantity <= 1}
              >
                -
              </Button>
              <span className="w-10 text-center">{quantity}</span>
              <Button 
                variant="outlined" 
                onClick={() => setQuantity(quantity + 1)}
              >
                +
              </Button>
            </Flex>
          </div>
          
          {/* Add to Cart */}
          <Flex gap="md" className="mb-8">
            <Button variant="primary" fullWidth>
              In den Warenkorb
            </Button>
            <Button variant="outlined">
              ♡
            </Button>
          </Flex>
          
          {/* Features */}
          <div>
            <h3 className="font-bold mb-2">Hauptmerkmale:</h3>
            <ul className="list-disc pl-5 space-y-1">
              {product.features.map((feature, index) => (
                <li key={index} className="text-gray-700">{feature}</li>
              ))}
            </ul>
          </div>
        </div>
      </div>
      
      {/* Related Products */}
      <div>
        <h2 className="text-2xl font-bold mb-6">Das könnte Ihnen auch gefallen</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
          {relatedProducts.map(product => (
            <div key={product.id} className="bg-white rounded-lg shadow-sm p-4">
              <div className="bg-gray-100 rounded-lg mb-4 h-40 flex items-center justify-center">
                <div className="text-4xl">🎧</div>
              </div>
              <h3 className="font-medium mb-1">{product.name}</h3>
              <div className="flex text-yellow-400 text-sm mb-1">{'★★★★☆'}</div>
              <div className="font-bold">€{product.price.toFixed(2)}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Blog-Layout

Dieses Beispiel zeigt ein Layout für einen Blog mit Artikeln, Sidebar und Kommentarbereich.

function BlogLayout() {
  // Simulierte Blogdaten
  const article = {
    title: 'Die Zukunft der Web-Entwicklung: Trends für 2025',
    date: '15. März 2025',
    author: {
      name: 'Maria Schmidt',
      avatar: '👩‍💻',
      role: 'Senior Frontend Developer'
    },
    content: `
      Die Web-Entwicklung entwickelt sich ständig weiter, und 2025 wird keine Ausnahme sein. In diesem Artikel werfen wir einen Blick auf die wichtigsten Trends, die die Web-Entwicklung im kommenden Jahr prägen werden.
      
      ## 1. KI-gestützte Entwicklungstools
      
      Künstliche Intelligenz revolutioniert die Art und Weise, wie wir Code schreiben und debuggen. KI-Assistenten können jetzt nicht nur Code vervollständigen, sondern auch Fehler vorhersagen und Optimierungsvorschläge machen.
      
      ## 2. WebAssembly wird Mainstream
      
      WebAssembly (Wasm) ermöglicht es Entwicklern, Hochleistungsanwendungen im Browser auszuführen. Mit zunehmender Browser-Unterstützung und besseren Toolchains wird Wasm 2025 zu einer Standardtechnologie für komplexe Web-Anwendungen.
      
      ## 3. Micro-Frontends gewinnen an Bedeutung
      
      Die Aufteilung von Frontend-Anwendungen in kleinere, unabhängig entwickelbare und bereitstellbare Teile wird immer beliebter. Micro-Frontends ermöglichen es Teams, unabhängig zu arbeiten und verschiedene Technologien innerhalb derselben Anwendung zu verwenden.
    `,
    tags: ['Web-Entwicklung', 'Trends', 'JavaScript', 'WebAssembly', 'Micro-Frontends'],
    comments: [
      {
        id: 1,
        author: 'Thomas Weber',
        avatar: '👨',
        date: 'vor 2 Stunden',
        content: 'Sehr interessanter Artikel! Ich bin besonders gespannt auf die Entwicklung von WebAssembly in den nächsten Jahren.'
      },
      {
        id: 2,
        author: 'Julia Becker',
        avatar: '👩',
        date: 'vor 5 Stunden',
        content: 'Danke für den Einblick! Ich arbeite bereits mit Micro-Frontends und kann bestätigen, dass dieser Ansatz viele Vorteile bietet.'
      }
    ]
  };
  
  const popularPosts = [
    { id: 1, title: 'TypeScript 5.0: Die wichtigsten Neuerungen', views: 1245 },
    { id: 2, title: 'React vs. Vue: Ein objektiver Vergleich', views: 982 },
    { id: 3, title: 'CSS Grid: Fortgeschrittene Layouts erstellen', views: 879 },
    { id: 4, title: 'Progressive Web Apps in 2025', views: 754 }
  ];
  
  const categories = [
    { id: 1, name: 'JavaScript', count: 42 },
    { id: 2, name: 'CSS & Design', count: 38 },
    { id: 3, name: 'Frontend Frameworks', count: 27 },
    { id: 4, name: 'Backend Development', count: 23 },
    { id: 5, name: 'DevOps', count: 19 }
  ];
  
  const [commentText, setCommentText] = React.useState('');
  
  return (
    <div className="max-w-7xl mx-auto p-6">
      <header className="mb-10">
        <h1 className="text-4xl font-bold mb-2">{article.title}</h1>
        <Flex gap="md" align="center" className="text-gray-600">
          <span>{article.date}</span>
          <span>•</span>
          <Flex gap="xs" align="center">
            <span className="text-xl">{article.author.avatar}</span>
            <span>{article.author.name}</span>
          </Flex>
        </Flex>
      </header>
      
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-10">
        {/* Main Content */}
        <div className="lg:col-span-2">
          <article className="prose prose-lg max-w-none mb-10">
            {article.content.split('\n\n').map((paragraph, index) => {
              if (paragraph.startsWith('## ')) {
                return <h2 key={index} className="text-2xl font-bold mt-8 mb-4">{paragraph.replace('## ', '')}</h2>;
              }
              return <p key={index} className="mb-4">{paragraph}</p>;
            })}
          </article>
          
          {/* Tags */}
          <div className="mb-10">
            <Flex gap="sm" wrap="wrap">
              {article.tags.map(tag => (
                <span key={tag} className="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">
                  {tag}
                </span>
              ))}
            </Flex>
          </div>
          
          {/* Author Bio */}
          <div className="bg-gray-50 p-6 rounded-lg mb-10">
            <Flex gap="md">
              <div className="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center text-3xl">
                {article.author.avatar}
              </div>
              <div>
                <h3 className="font-bold text-lg">{article.author.name}</h3>
                <p className="text-gray-600 mb-2">{article.author.role}</p>
                <p className="text-gray-700">
                  Maria ist eine erfahrene Frontend-Entwicklerin mit über 10 Jahren Erfahrung in der Webentwicklung.
                  Sie ist spezialisiert auf moderne JavaScript-Frameworks und Performance-Optimierung.
                </p>
              </div>
            </Flex>
          </div>
          
          {/* Comments */}
          <div>
            <h3 className="text-2xl font-bold mb-6">Kommentare ({article.comments.length})</h3>
            
            {/* Comment List */}
            <div className="space-y-6 mb-8">
              {article.comments.map(comment => (
                <div key={comment.id} className="border-b border-gray-100 pb-6">
                  <Flex gap="md">
                    <div className="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center">
                      {comment.avatar}
                    </div>
                    <div className="flex-1">
                      <Flex justify="space-between" align="center" className="mb-1">
                        <span className="font-medium">{comment.author}</span>
                        <span className="text-sm text-gray-500">{comment.date}</span>
                      </Flex>
                      <p className="text-gray-700">{comment.content}</p>
                    </div>
                  </Flex>
                </div>
              ))}
            </div>
            
            {/* Comment Form */}
            <div>
              <h4 className="font-bold mb-4">Hinterlassen Sie einen Kommentar</h4>
              <form>
                <TextArea
                  value={commentText}
                  onChange={(e) => setCommentText(e.target.value)}
                  placeholder="Ihr Kommentar..."
                  rows={4}
                  className="mb-4"
                />
                <Button variant="primary">Kommentar absenden</Button>
              </form>
            </div>
          </div>
        </div>
        
        {/* Sidebar */}
        <div>
          {/* Search */}
          <div className="mb-8">
            <Input
              placeholder="Suchen..."
              className="mb-2"
            />
          </div>
          
          {/* Popular Posts */}
          <div className="mb-8">
            <h3 className="text-xl font-bold mb-4">Beliebte Artikel</h3>
            <List>
              {popularPosts.map(post => (
                <ListItem
                  key={post.id}
                  primary={post.title}
                  secondary={`${post.views} Aufrufe`}
                  divider
                />
              ))}
            </List>
          </div>
          
          {/* Categories */}
          <div className="mb-8">
            <h3 className="text-xl font-bold mb-4">Kategorien</h3>
            <List>
              {categories.map(category => (
                <ListItem
                  key={category.id}
                  primary={category.name}
                  secondary={`${category.count} Artikel`}
                  divider
                />
              ))}
            </List>
          </div>
          
          {/* Newsletter */}
          <div className="bg-gray-50 p-6 rounded-lg">
            <h3 className="text-xl font-bold mb-2">Newsletter abonnieren</h3>
            <p className="text-gray-700 mb-4">Erhalten Sie die neuesten Artikel direkt in Ihren Posteingang.</p>
            <Input
              placeholder="Ihre E-Mail-Adresse"
              className="mb-2"
            />
            <Button variant="primary" fullWidth>Abonnieren</Button>
          </div>
        </div>
      </div>
    </div>
  );
}

App-Layout mit Navigation

Dieses Beispiel zeigt ein Layout für eine Web-App mit Navigation, Tabs und Content-Bereich.

function AppLayout() {
  const [activeTab, setActiveTab] = React.useState('overview');
  const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false);
  
  // Simulierte Projektdaten
  const project = {
    name: 'E-Commerce Plattform',
    description: 'Eine moderne E-Commerce-Plattform mit Benutzer- und Produktverwaltung.',
    progress: 68,
    status: 'In Bearbeitung',
    dueDate: '15. Mai 2025',
    team: [
      { id: 1, name: 'Anna M.', avatar: '👩' },
      { id: 2, name: 'Thomas K.', avatar: '👨' },
      { id: 3, name: 'Julia B.', avatar: '👩‍🦰' },
      { id: 4, name: 'Michael S.', avatar: '👨‍🦱' }
    ],
    tasks: [
      { id: 1, title: 'Benutzeroberfläche entwerfen', status: 'Abgeschlossen', assignee: 'Anna M.' },
      { id: 2, title: 'API-Endpunkte implementieren', status: 'In Bearbeitung', assignee: 'Thomas K.' },
      { id: 3, title: 'Zahlungsintegration', status: 'In Bearbeitung', assignee: 'Julia B.' },
      { id: 4, title: 'Benutzertests durchführen', status: 'Ausstehend', assignee: 'Michael S.' },
      { id: 5, title: 'Dokumentation erstellen', status: 'Ausstehend', assignee: 'Anna M.' }
    ]
  };
  
  // Navigationsmenü
  const navItems = [
    { id: 'dashboard', label: 'Dashboard', icon: '📊' },
    { id: 'projects', label: 'Projekte', icon: '📁', active: true },
    { id: 'tasks', label: 'Aufgaben', icon: '✓' },
    { id: 'calendar', label: 'Kalender', icon: '📅' },
    { id: 'messages', label: 'Nachrichten', icon: '💬' },
    { id: 'reports', label: 'Berichte', icon: '📈' }
  ];
  
  // Tabs
  const tabs = [
    { id: 'overview', label: 'Übersicht' },
    { id: 'tasks', label: 'Aufgaben' },
    { id: 'files', label: 'Dateien' },
    { id: 'team', label: 'Team' },
    { id: 'settings', label: 'Einstellungen' }
  ];
  
  const toggleSidebar = () => {
    setSidebarCollapsed(!sidebarCollapsed);
  };
  
  return (
    <div className="min-h-screen bg-gray-50 flex">
      {/* Sidebar */}
      <div className={`bg-gray-800 text-white ${sidebarCollapsed ? 'w-16' : 'w-64'} transition-all duration-300 ease-in-out`}>
        {/* Logo */}
        <div className="p-4 border-b border-gray-700">
          <Flex justify={sidebarCollapsed ? 'center' : 'space-between'} align="center">
            {!sidebarCollapsed && <span className="font-bold text-xl">TaskFlow</span>}
            <Button 
              variant="text" 
              color="light"
              onClick={toggleSidebar}
              aria-label="Toggle sidebar"
            >
              {sidebarCollapsed ? '→' : '←'}
            </Button>
          </Flex>
        </div>
        
        {/* Navigation */}
        <nav className="p-2">
          <List>
            {navItems.map(item => (
              <ListItem
                key={item.id}
                primary={sidebarCollapsed ? null : item.label}
                icon={<span className="text-xl">{item.icon}</span>}
                className={`rounded my-1 ${item.active ? 'bg-blue-600' : 'hover:bg-gray-700'}`}
              />
            ))}
          </List>
        </nav>
      </div>
      
      {/* Main Content */}
      <div className="flex-1 flex flex-col">
        {/* Header */}
        <header className="bg-white shadow-sm">
          <Flex justify="space-between" align="center" className="px-6 py-3">
            <h1 className="text-xl font-bold">Projekte</h1>
            
            <Flex gap="md" align="center">
              <Button variant="outlined" size="sm">
                <span className="mr-1">+</span> Neues Projekt
              </Button>
              <div className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
                👤
              </div>
            </Flex>
          </Flex>
        </header>
        
        {/* Project Header */}
        <div className="bg-white border-b p-6">
          <Flex justify="space-between" align="flex-start" className="mb-6">
            <div>
              <h2 className="text-2xl font-bold mb-1">{project.name}</h2>
              <p className="text-gray-600">{project.description}</p>
            </div>
            <Flex gap="sm">
              <Button variant="outlined" size="sm">Bearbeiten</Button>
              <Button variant="primary" size="sm">Teilen</Button>
            </Flex>
          </Flex>
          
          <Flex gap="md" wrap="wrap">
            <div className="bg-gray-50 px-4 py-2 rounded">
              <div className="text-sm text-gray-500 mb-1">Status</div>
              <div className="font-medium">{project.status}</div>
            </div>
            <div className="bg-gray-50 px-4 py-2 rounded">
              <div className="text-sm text-gray-500 mb-1">Fälligkeitsdatum</div>
              <div className="font-medium">{project.dueDate}</div>
            </div>
            <div className="bg-gray-50 px-4 py-2 rounded">
              <div className="text-sm text-gray-500 mb-1">Fortschritt</div>
              <div className="font-medium">{project.progress}%</div>
            </div>
            <div className="bg-gray-50 px-4 py-2 rounded">
              <div className="text-sm text-gray-500 mb-1">Team</div>
              <Flex gap="xs">
                {project.team.map(member => (
                  <div key={member.id} className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center" title={member.name}>
                    {member.avatar}
                  </div>
                ))}
              </Flex>
            </div>
          </Flex>
        </div>
        
        {/* Tabs */}
        <div className="bg-white border-b">
          <Flex className="px-6">
            {tabs.map(tab => (
              <div
                key={tab.id}
                className={`px-4 py-3 cursor-pointer ${activeTab === tab.id ? 'border-b-2 border-blue-500 text-blue-600 font-medium' : 'text-gray-600 hover:text-gray-900'}`}
                onClick={() => setActiveTab(tab.id)}
              >
                {tab.label}
              </div>
            ))}
          </Flex>
        </div>
        
        {/* Content */}
        <div className="flex-1 p-6">
          {activeTab === 'overview' && (
            <div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                {/* Progress Card */}
                <div className="bg-white p-6 rounded-lg shadow-sm">
                  <h3 className="text-lg font-bold mb-4">Projektfortschritt</h3>
                  <div className="mb-2">
                    <Flex justify="space-between" className="mb-1">
                      <span>Fortschritt</span>
                      <span>{project.progress}%</span>
                    </Flex>
                    <div className="w-full bg-gray-200 rounded-full h-2.5">
                      <div className="bg-blue-600 h-2.5 rounded-full" style={{ width: `${project.progress}%` }}></div>
                    </div>
                  </div>
                  <div className="mt-4">
                    <Flex justify="space-between" className="text-sm text-gray-500">
                      <span>Start: 1. Februar 2025</span>
                      <span>Ende: {project.dueDate}</span>
                    </Flex>
                  </div>
                </div>
                
                {/* Recent Activity Card */}
                <div className="bg-white p-6 rounded-lg shadow-sm">
                  <h3 className="text-lg font-bold mb-4">Neueste Aktivitäten</h3>
                  <List>
                    <ListItem 
                      primary="Thomas K. hat eine Aufgabe abgeschlossen"
                      secondary="vor 2 Stunden"
                      divider
                    />
                    <ListItem 
                      primary="Anna M. hat eine neue Datei hochgeladen"
                      secondary="vor 5 Stunden"
                      divider
                    />
                    <ListItem 
                      primary="Julia B. hat einen Kommentar hinzugefügt"
                      secondary="gestern"
                    />
                  </List>
                </div>
              </div>
              
              {/* Tasks Overview */}
              <div className="bg-white p-6 rounded-lg shadow-sm">
                <Flex justify="space-between" align="center" className="mb-4">
                  <h3 className="text-lg font-bold">Aufgaben</h3>
                  <Button variant="text" color="primary">Alle anzeigen</Button>
                </Flex>
                <table className="w-full">
                  <thead>
                    <tr className="border-b">
                      <th className="text-left py-2 font-medium">Aufgabe</th>
                      <th className="text-left py-2 font-medium">Status</th>
                      <th className="text-left py-2 font-medium">Zugewiesen an</th>
                    </tr>
                  </thead>
                  <tbody>
                    {project.tasks.map(task => (
                      <tr key={task.id} className="border-b">
                        <td className="py-3">{task.title}</td>
                        <td className="py-3">
                          <span className={`px-2 py-1 rounded-full text-xs ${
                            task.status === 'Abgeschlossen' ? 'bg-green-100 text-green-800' :
                            task.status === 'In Bearbeitung' ? 'bg-blue-100 text-blue-800' :
                            'bg-gray-100 text-gray-800'
                          }`}>
                            {task.status}
                          </span>
                        </td>
                        <td className="py-3">{task.assignee}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}
          
          {activeTab === 'tasks' && (
            <div className="bg-white p-6 rounded-lg shadow-sm">
              <h3 className="text-lg font-bold mb-4">Alle Aufgaben</h3>
              <p>Hier werden alle Projektaufgaben angezeigt.</p>
            </div>
          )}
          
          {activeTab === 'files' && (
            <div className="bg-white p-6 rounded-lg shadow-sm">
              <h3 className="text-lg font-bold mb-4">Dateien</h3>
              <p>Hier werden alle Projektdateien angezeigt.</p>
            </div>
          )}
          
          {activeTab === 'team' && (
            <div className="bg-white p-6 rounded-lg shadow-sm">
              <h3 className="text-lg font-bold mb-4">Teammitglieder</h3>
              <p>Hier werden alle Teammitglieder angezeigt.</p>
            </div>
          )}
          
          {activeTab === 'settings' && (
            <div className="bg-white p-6 rounded-lg shadow-sm">
              <h3 className="text-lg font-bold mb-4">Projekteinstellungen</h3>
              <p>Hier können Sie die Projekteinstellungen verwalten.</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}