@pattern-stack/frontend-patterns 0.1.2 → 0.1.3

package/src/atoms/composed/StyleGuide.tsx

@@ -1,717 +0,0 @@
-import React from 'react';
-import { Card } from '../ui/card';
-import { DataTable, type Column } from './DataTable/DataTable';
-import { StatCard } from './StatCard/StatCard';
-import { DataBadge } from './DataBadge/DataBadge';
-import { EmptyState } from './EmptyState/EmptyState';
-import { cn } from '../utils/utils';
-import { Users, DollarSign, ShoppingCart, TrendingUp } from 'lucide-react';
-
-export const StyleGuide: React.FC = () => {
-  return (
-    <div className="p-8 space-y-8 max-w-6xl mx-auto">
-      <div>
-        <h1 className="text-3xl font-bold mb-2">Data Interface Style Guide</h1>
-        <p className="text-muted-foreground">Comprehensive design system for data applications</p>
-      </div>
-
-      {/* Color System */}
-      <section>
-        <h2 className="text-2xl font-semibold mb-4">Color System</h2>
-        <p className="text-muted-foreground mb-8">
-          Our comprehensive color palette designed for data visualization and interface design.
-        </p>
-        
-        {/* Category Colors */}
-        <div className="mb-8">
-          <h3 className="text-lg font-medium mb-3">Data Categories (8 colors)</h3>
-          <p className="text-sm text-muted-foreground mb-4">
-            Distinct, accessible colors for data categorization and visualization.
-          </p>
-          <div className="grid grid-cols-4 gap-4">
-            {[
-              { num: 1, color: 'hsl(220 70% 50%)', name: 'Blue' },
-              { num: 2, color: 'hsl(160 60% 45%)', name: 'Teal' },
-              { num: 3, color: 'hsl(30 80% 55%)', name: 'Orange' },
-              { num: 4, color: 'hsl(280 65% 60%)', name: 'Purple' },
-              { num: 5, color: 'hsl(340 75% 55%)', name: 'Pink' },
-              { num: 6, color: 'hsl(120 50% 45%)', name: 'Green' },
-              { num: 7, color: 'hsl(45 85% 60%)', name: 'Yellow' },
-              { num: 8, color: 'hsl(15 75% 50%)', name: 'Red' },
-            ].map(({ num, color }) => (
-              <div key={num} className="space-y-2">
-                <div 
-                  className="h-16 rounded flex items-center justify-center text-white font-semibold"
-                  style={{ backgroundColor: color }}
-                >
-                  Category {num}
-                </div>
-                <div 
-                  className="px-3 py-1 rounded text-sm"
-                  style={{ 
-                    backgroundColor: color.replace(')', ' / 0.1)'),
-                    color: color,
-                    border: `1px solid ${color.replace(')', ' / 0.2)')}`
-                  }}
-                >
-                  Badge {num}
-                </div>
-                <div className="text-xs text-center font-mono">bg-category-{num}</div>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* Status Colors */}
-        <div className="mb-8">
-          <h3 className="text-lg font-medium mb-3">Status Colors</h3>
-          <p className="text-sm text-muted-foreground mb-4">
-            Semantic colors for communicating state and feedback.
-          </p>
-          <div className="grid grid-cols-5 gap-4">
-            {[
-              { status: 'success', color: 'hsl(142 76% 36%)' },
-              { status: 'warning', color: 'hsl(45 93% 47%)' },
-              { status: 'error', color: 'hsl(0 84% 60%)' },
-              { status: 'info', color: 'hsl(217 91% 60%)' },
-              { status: 'neutral', color: 'hsl(215 16% 47%)' },
-            ].map(({ status, color }) => (
-              <div key={status} className="space-y-2">
-                <div 
-                  className="h-16 rounded flex items-center justify-center text-white font-semibold capitalize"
-                  style={{ backgroundColor: color }}
-                >
-                  {status}
-                </div>
-                <div 
-                  className="px-3 py-1 rounded-pill text-sm capitalize"
-                  style={{ 
-                    backgroundColor: color.replace(')', ' / 0.1)'),
-                    color: color,
-                    border: `1px solid ${color.replace(')', ' / 0.2)')}`
-                  }}
-                >
-                  {status}
-                </div>
-                <div className="text-xs text-center font-mono">bg-status-{status}</div>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* Standard Gray Scale */}
-        <div className="mb-8">
-          <h3 className="text-lg font-medium mb-3">Standard Gray Scale</h3>
-          <p className="text-sm text-muted-foreground mb-4">
-            Tailwind-compatible gray scale (50-950) for consistent neutral colors.
-          </p>
-          <div className="grid grid-cols-6 gap-2">
-            {[
-              { shade: 50, color: 'hsl(210 20% 98%)' },
-              { shade: 100, color: 'hsl(214 15% 91%)' },
-              { shade: 200, color: 'hsl(213 27% 84%)' },
-              { shade: 300, color: 'hsl(215 25% 77%)' },
-              { shade: 400, color: 'hsl(215 20% 65%)' },
-              { shade: 500, color: 'hsl(215 16% 47%)' },
-              { shade: 600, color: 'hsl(215 19% 35%)' },
-              { shade: 700, color: 'hsl(215 25% 27%)' },
-              { shade: 800, color: 'hsl(217 33% 17%)' },
-              { shade: 900, color: 'hsl(222 47% 11%)' },
-              { shade: 950, color: 'hsl(224 71% 4%)' },
-            ].map(({ shade, color }) => (
-              <div key={shade} className="space-y-1">
-                <div 
-                  className="h-12 rounded border flex items-center justify-center text-xs font-mono"
-                  style={{ 
-                    backgroundColor: color, 
-                    color: shade >= 500 ? 'white' : 'black',
-                    borderColor: 'hsl(214.3 31.8% 91.4%)'
-                  }}
-                >
-                  {shade}
-                </div>
-                <div className="text-xs text-center font-mono">gray-{shade}</div>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* Additional Semantic Colors */}
-        <div className="mb-8">
-          <h3 className="text-lg font-medium mb-3">Additional Semantic Colors</h3>
-          <p className="text-sm text-muted-foreground mb-4">
-            Extended semantic palette for specific use cases and contexts.
-          </p>
-          <div className="grid grid-cols-5 gap-4">
-            {[
-              { name: 'danger', color: 'hsl(0 84% 60%)' },
-              { name: 'positive', color: 'hsl(142 76% 36%)' },
-              { name: 'negative', color: 'hsl(0 84% 60%)' },
-              { name: 'pending', color: 'hsl(45 93% 47%)' },
-              { name: 'disabled', color: 'hsl(215 16% 47%)' },
-            ].map(({ name, color }) => (
-              <div key={name} className="space-y-2">
-                <div 
-                  className="h-16 rounded flex items-center justify-center text-white font-semibold capitalize"
-                  style={{ backgroundColor: color }}
-                >
-                  {name}
-                </div>
-                <div className="text-xs text-center font-mono">bg-{name}</div>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* Interactive State Colors */}
-        <div className="mb-8">
-          <h3 className="text-lg font-medium mb-3">Interactive State Colors</h3>
-          <p className="text-sm text-muted-foreground mb-4">
-            Hover, active, and disabled states for interactive elements.
-          </p>
-          <div className="grid grid-cols-3 gap-4">
-            {[
-              { name: 'Primary States', states: [
-                { label: 'Default', color: 'hsl(222.2 47.4% 11.2%)', textColor: 'hsl(210 40% 98%)' },
-                { label: 'Hover', color: 'hsl(222.2 47.4% 15%)', textColor: 'white' },
-                { label: 'Active', color: 'hsl(222.2 47.4% 8%)', textColor: 'white' },
-              ]},
-              { name: 'Secondary States', states: [
-                { label: 'Default', color: 'hsl(210 40% 96%)', textColor: 'hsl(222.2 84% 4.9%)' },
-                { label: 'Hover', color: 'hsl(210 40% 92%)', textColor: 'hsl(222.2 84% 4.9%)' },
-                { label: 'Active', color: 'hsl(210 40% 88%)', textColor: 'hsl(222.2 84% 4.9%)' },
-              ]},
-              { name: 'Destructive States', states: [
-                { label: 'Default', color: 'hsl(0 84.2% 60.2%)', textColor: 'hsl(210 40% 98%)' },
-                { label: 'Hover', color: 'hsl(0 84.2% 65%)', textColor: 'white' },
-                { label: 'Active', color: 'hsl(0 84.2% 55%)', textColor: 'white' },
-              ]},
-            ].map(({ name, states }) => (
-              <div key={name} className="space-y-3">
-                <h4 className="text-sm font-medium">{name}</h4>
-                <div className="space-y-2">
-                  {states.map(({ label, color, textColor }) => (
-                    <div key={label} className="space-y-1">
-                      <div 
-                        className="h-12 rounded flex items-center justify-center text-sm font-medium"
-                        style={{ backgroundColor: color, color: textColor }}
-                      >
-                        {label}
-                      </div>
-                      <div className="text-xs text-center font-mono">bg-{name.toLowerCase().split(' ')[0]}-{label.toLowerCase()}</div>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* Extended Gray Scale */}
-        <div className="mb-8">
-          <h3 className="text-lg font-medium mb-3">Extended Gray Scale (Custom)</h3>
-          <p className="text-sm text-muted-foreground mb-4">
-            Custom gray values (25-925) for fine-grained neutral color control.
-          </p>
-          <div className="grid grid-cols-6 gap-2">
-            {[
-              { shade: 25, color: 'hsl(210 20% 98%)' },
-              { shade: 75, color: 'hsl(214 15% 91%)' },
-              { shade: 150, color: 'hsl(213 27% 84%)' },
-              { shade: 250, color: 'hsl(215 25% 77%)' },
-              { shade: 350, color: 'hsl(215 20% 65%)' },
-              { shade: 450, color: 'hsl(215 16% 47%)' },
-              { shade: 550, color: 'hsl(215 19% 35%)' },
-              { shade: 650, color: 'hsl(215 25% 27%)' },
-              { shade: 750, color: 'hsl(217 33% 17%)' },
-              { shade: 850, color: 'hsl(222 47% 11%)' },
-              { shade: 925, color: 'hsl(224 71% 4%)' },
-            ].map(({ shade, color }) => (
-              <div key={shade} className="space-y-1">
-                <div 
-                  className="h-12 rounded border flex items-center justify-center text-xs font-mono"
-                  style={{ 
-                    backgroundColor: color, 
-                    color: shade >= 450 ? 'white' : 'black',
-                    borderColor: 'hsl(214.3 31.8% 91.4%)'
-                  }}
-                >
-                  {shade}
-                </div>
-                <div className="text-xs text-center font-mono">gray-{shade}</div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Radius System */}
-      <section>
-        <h2 className="text-2xl font-semibold mb-4">Border Radius System</h2>
-        <div className="space-y-6">
-          {/* Regular Border Radius */}
-          <div>
-            <h3 className="text-lg font-medium mb-3">Standard Border Radius</h3>
-            <div className="grid grid-cols-4 gap-4">
-              {[
-                { name: 'xs', class: 'rounded-xs', description: '2px' },
-                { name: 'sm', class: 'rounded-sm', description: '4px' },
-                { name: 'default', class: 'rounded', description: '8px' },
-                { name: 'md', class: 'rounded-md', description: '10px' },
-                { name: 'lg', class: 'rounded-lg', description: '12px' },
-                { name: 'xl', class: 'rounded-xl', description: '16px' },
-                { name: '2xl', class: 'rounded-2xl', description: '20px' },
-                { name: '3xl', class: 'rounded-3xl', description: '24px' },
-              ].map((radius) => (
-                <div key={radius.name} className="text-center">
-                  <div 
-                    className={cn("h-16 w-full mb-2 flex items-center justify-center text-white font-medium", radius.class)}
-                    style={{ backgroundColor: 'hsl(220 70% 50%)' }}
-                  >
-                    {radius.name}
-                  </div>
-                  <div className="text-sm font-mono">{radius.class}</div>
-                  <div className="text-xs text-muted-foreground">{radius.description}</div>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Pill Shapes */}
-          <div>
-            <h3 className="text-lg font-medium mb-3">Pill Shapes (Fully Rounded)</h3>
-            <div className="space-y-3">
-              <div className="flex items-center gap-4">
-                <div 
-                  className="px-6 py-3 rounded-pill text-white font-medium"
-                  style={{ backgroundColor: 'hsl(220 70% 50%)' }}
-                >
-                  Button Pill
-                </div>
-                <div className="text-sm font-mono">rounded-pill</div>
-                <div className="text-sm text-muted-foreground">Perfect for buttons and badges</div>
-              </div>
-              <div className="flex items-center gap-4">
-                <div 
-                  className="px-4 py-2 rounded-pill text-sm"
-                  style={{ 
-                    backgroundColor: 'hsl(220 70% 50% / 0.1)',
-                    color: 'hsl(220 70% 50%)',
-                    border: '1px solid hsl(220 70% 50% / 0.2)'
-                  }}
-                >
-                  Badge Pill
-                </div>
-                <div className="text-sm font-mono">rounded-pill</div>
-                <div className="text-sm text-muted-foreground">Great for status indicators</div>
-              </div>
-              <div className="flex items-center gap-4">
-                <div 
-                  className="w-8 h-8 rounded-pill flex items-center justify-center text-white font-medium"
-                  style={{ backgroundColor: 'hsl(220 70% 50%)' }}
-                >
-                  A
-                </div>
-                <div className="text-sm font-mono">rounded-pill</div>
-                <div className="text-sm text-muted-foreground">Avatar or icon containers</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Spacing System */}
-      <section>
-        <h2 className="text-2xl font-semibold mb-4">Spacing System</h2>
-        <div className="space-y-4">
-          <div>
-            <h3 className="text-lg font-medium mb-3">Card Layouts</h3>
-            <div className="space-y-4">
-              
-              {/* Standard Card */}
-              <Card className="card-container">
-                <h4 className="text-data-label">Standard Card</h4>
-                <p className="text-data-value">Uses var(--card-padding) for consistent spacing</p>
-                <p className="text-data-meta">Perfect for primary content containers</p>
-              </Card>
-
-              {/* Nested Card */}
-              <Card className="card-container">
-                <h4 className="text-data-label">Parent Card</h4>
-                <p className="text-data-value mb-4">Contains nested elements with proper spacing</p>
-                
-                <div className="card-nested">
-                  <h5 className="text-data-label">Nested Card</h5>
-                  <p className="text-data-value">Automatically offset by var(--nested-offset)</p>
-                  <p className="text-data-meta">Edges align perfectly with parent</p>
-                </div>
-              </Card>
-
-              {/* Flush Cards */}
-              <Card className="card-container">
-                <h4 className="text-data-label mb-4">List with Flush Cards</h4>
-                {['Item 1', 'Item 2', 'Item 3'].map((item, i) => (
-                  <div key={i} className="card-flush border">
-                    <div className="text-data-value">{item}</div>
-                    <div className="text-data-meta">Flush cards for seamless lists</div>
-                  </div>
-                ))}
-              </Card>
-            </div>
-          </div>
-
-          <div>
-            <h3 className="text-lg font-medium mb-3">Edge Alignment</h3>
-            <Card className="card-container">
-              <h4 className="text-data-label">Edge Alignment Demo</h4>
-              <div className="edge-align-both bg-muted p-4 rounded text-center">
-                <div className="text-data-value">Edge Aligned Content</div>
-                <div className="text-data-meta">Extends to card edges using edge-align-both</div>
-              </div>
-            </Card>
-          </div>
-        </div>
-      </section>
-
-      {/* Typography */}
-      <section>
-        <h2 className="text-2xl font-semibold mb-4">Typography System</h2>
-        <p className="text-muted-foreground mb-8">
-          Specialized typography classes designed for data interfaces and information hierarchy.
-        </p>
-        
-        <div className="space-y-6">
-          {/* Data Typography Hierarchy */}
-          <Card className="card-container">
-            <h3 className="text-lg font-medium mb-4">Data Typography Hierarchy</h3>
-            <div className="space-y-4">
-              <div>
-                <div className="text-data-label">Label Text</div>
-                <div className="text-data-value">Primary Value</div>
-                <div className="text-data-meta">Supporting metadata information</div>
-              </div>
-              <div className="text-sm text-muted-foreground">
-                Perfect for displaying data relationships with clear visual hierarchy.
-              </div>
-            </div>
-          </Card>
-
-          {/* Typography Scale */}
-          <Card className="card-container">
-            <h3 className="text-lg font-medium mb-4">Data Typography Scale</h3>
-          
-            <div className="grid grid-cols-3 gap-4">
-              <div>
-                <div className="text-data-xs mb-1">Data XS</div>
-                <div className="text-xs font-mono bg-muted p-2 rounded">text-data-xs</div>
-                <div className="text-xs text-muted-foreground mt-1">12px • For fine details</div>
-              </div>
-              <div>
-                <div className="text-data-sm mb-1">Data SM</div>
-                <div className="text-xs font-mono bg-muted p-2 rounded">text-data-sm</div>
-                <div className="text-xs text-muted-foreground mt-1">14px • Metadata</div>
-              </div>
-              <div>
-                <div className="text-data-base mb-1">Data Base</div>
-                <div className="text-xs font-mono bg-muted p-2 rounded">text-data-base</div>
-                <div className="text-xs text-muted-foreground mt-1">16px • Body text</div>
-              </div>
-              <div>
-                <div className="text-data-lg mb-1">Data LG</div>
-                <div className="text-xs font-mono bg-muted p-2 rounded">text-data-lg</div>
-                <div className="text-xs text-muted-foreground mt-1">18px • Emphasis</div>
-              </div>
-              <div>
-                <div className="text-data-xl mb-1">Data XL</div>
-                <div className="text-xs font-mono bg-muted p-2 rounded">text-data-xl</div>
-                <div className="text-xs text-muted-foreground mt-1">20px • Headings</div>
-              </div>
-            </div>
-          </Card>
-        </div>
-      </section>
-
-      {/* Stat Cards */}
-      <section>
-        <h2 className="text-2xl font-semibold mb-4">Stat Cards</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-          <StatCard
-            title="Total Users"
-            value="1,234"
-            subtitle="Active accounts"
-            trend={{ value: 12.5, label: "vs last month" }}
-            category={1}
-            icon={<Users className="w-5 h-5" />}
-            onClick={() => console.log('Navigate to users')}
-          />
-          <StatCard
-            title="Revenue"
-            value="$45,231"
-            subtitle="Monthly recurring"
-            trend={{ value: -3.2, label: "vs last month" }}
-            category={2}
-            icon={<DollarSign className="w-5 h-5" />}
-          />
-          <StatCard
-            title="Orders"
-            value="89"
-            subtitle="This week"
-            trend={{ value: 0, label: "vs last week" }}
-            category={3}
-            icon={<ShoppingCart className="w-5 h-5" />}
-          />
-          <StatCard
-            title="Growth Rate"
-            value="23.1%"
-            subtitle="Year over year"
-            trend={{ value: 8.7, label: "vs last year" }}
-            category={4}
-            icon={<TrendingUp className="w-5 h-5" />}
-          />
-        </div>
-      </section>
-
-      {/* Data Badges */}
-      <section>
-        <h2 className="text-2xl font-semibold mb-4">Data Badges</h2>
-        <Card className="card-container space-y-6">
-          <div>
-            <h3 className="text-lg font-medium mb-3">Category Badges</h3>
-            <div className="flex flex-wrap gap-2">
-              <DataBadge variant="category" category={1}>User</DataBadge>
-              <DataBadge variant="category" category={2}>Admin</DataBadge>
-              <DataBadge variant="category" category={3}>Manager</DataBadge>
-              <DataBadge variant="category" category={4}>Guest</DataBadge>
-              <DataBadge variant="category" category={5}>VIP</DataBadge>
-            </div>
-          </div>
-          
-          <div>
-            <h3 className="text-lg font-medium mb-3">Status Badges</h3>
-            <div className="flex flex-wrap gap-2">
-              <DataBadge variant="status" status="success">Active</DataBadge>
-              <DataBadge variant="status" status="warning">Pending</DataBadge>
-              <DataBadge variant="status" status="error">Inactive</DataBadge>
-              <DataBadge variant="status" status="info">Processing</DataBadge>
-              <DataBadge variant="status" status="neutral">Unknown</DataBadge>
-            </div>
-          </div>
-
-          <div>
-            <h3 className="text-lg font-medium mb-3">Interactive Badges</h3>
-            <div className="flex flex-wrap gap-2">
-              <DataBadge variant="category" category={1} interactive onClick={() => alert('Category clicked!')}>
-                Clickable
-              </DataBadge>
-              <DataBadge variant="status" status="success" size="lg" interactive>
-                Large Badge
-              </DataBadge>
-              <DataBadge variant="category" category={3} size="sm">
-                Small Badge
-              </DataBadge>
-            </div>
-          </div>
-        </Card>
-      </section>
-
-      {/* Empty States */}
-      <section>
-        <h2 className="text-2xl font-semibold mb-4">Empty States</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <Card className="card-container">
-            <EmptyState
-              variant="no-data"
-              title="No users found"
-              description="Get started by inviting your first team member to the workspace."
-              action={{
-                label: "Invite User",
-                onClick: () => console.log('Invite user')
-              }}
-              secondaryAction={{
-                label: "Learn More",
-                onClick: () => console.log('Learn more')
-              }}
-            />
-          </Card>
-          
-          <Card className="card-container">
-            <EmptyState
-              variant="no-results"
-              title="No search results"
-              description="Try adjusting your search terms or clearing the current filters."
-              action={{
-                label: "Clear Filters",
-                onClick: () => console.log('Clear filters')
-              }}
-            />
-          </Card>
-        </div>
-      </section>
-
-      {/* Data Table Component */}
-      <section>
-        <h2 className="text-2xl font-semibold mb-4">Data Table Component</h2>
-        <Card className="card-container">
-          <DataTableExample />
-        </Card>
-      </section>
-
-      {/* Usage Examples */}
-      <section>
-        <h2 className="text-2xl font-semibold mb-4">Real-World Examples</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          
-          {/* Data Table Card */}
-          <Card className="card-container">
-            <div className="text-data-label">User Analytics</div>
-            <div className="space-y-3 mt-4">
-              {[
-                { label: 'Active Users', value: '1,234', status: 'success', category: 1, categoryClass: 'bg-category-1', statusClass: 'status-success' },
-                { label: 'New Signups', value: '89', status: 'info', category: 2, categoryClass: 'bg-category-2', statusClass: 'status-info' },
-                { label: 'Churn Rate', value: '2.3%', status: 'warning', category: 3, categoryClass: 'bg-category-3', statusClass: 'status-warning' },
-              ].map((item, i) => (
-                <div key={i} className="flex items-center justify-between p-3 bg-muted/30 rounded">
-                  <div className="flex items-center gap-3">
-                    <div className={cn("w-3 h-3 rounded-full", item.categoryClass)}></div>
-                    <div className="text-data-value">{item.label}</div>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <div className="text-data-value">{item.value}</div>
-                    <div className={cn("px-2 py-1 rounded-pill text-xs", item.statusClass)}>
-                      {item.status}
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </Card>
-
-          {/* Status Dashboard */}
-          <Card className="card-container">
-            <div className="text-data-label">System Status</div>
-            <div className="grid grid-cols-2 gap-card-gap mt-4">
-              {[
-                { service: 'API', status: 'success', uptime: '99.9%', statusClass: 'status-success' },
-                { service: 'Database', status: 'success', uptime: '99.8%', statusClass: 'status-success' },
-                { service: 'Cache', status: 'warning', uptime: '98.2%', statusClass: 'status-warning' },
-                { service: 'CDN', status: 'error', uptime: '97.1%', statusClass: 'status-error' },
-              ].map((item, i) => (
-                <div key={i} className="card-nested">
-                  <div className="text-data-label">{item.service}</div>
-                  <div className="text-data-value">{item.uptime}</div>
-                  <div className={cn("px-2 py-1 rounded-pill text-xs mt-2 inline-block", item.statusClass)}>
-                    {item.status}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </Card>
-        </div>
-      </section>
-    </div>
-  );
-};
-
-// DataTable Example Component
-const DataTableExample = () => {
-  // Sample data
-  const sampleData = [
-    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'active', category: 1 },
-    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'active', category: 2 },
-    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Manager', status: 'inactive', category: 3 },
-    { id: 4, name: 'Alice Brown', email: 'alice@example.com', role: 'User', status: 'pending', category: 4 },
-    { id: 5, name: 'Charlie Wilson', email: 'charlie@example.com', role: 'Admin', status: 'active', category: 1 },
-    { id: 6, name: 'Diana Evans', email: 'diana@example.com', role: 'Manager', status: 'active', category: 2 },
-    { id: 7, name: 'Frank Miller', email: 'frank@example.com', role: 'User', status: 'inactive', category: 3 },
-    { id: 8, name: 'Grace Lee', email: 'grace@example.com', role: 'Admin', status: 'active', category: 4 },
-    { id: 9, name: 'Henry Taylor', email: 'henry@example.com', role: 'User', status: 'pending', category: 1 },
-    { id: 10, name: 'Iris Clark', email: 'iris@example.com', role: 'Manager', status: 'active', category: 2 },
-    { id: 11, name: 'Jack Davis', email: 'jack@example.com', role: 'User', status: 'active', category: 3 },
-    { id: 12, name: 'Kate Moore', email: 'kate@example.com', role: 'Admin', status: 'inactive', category: 4 },
-  ];
-
-  // Column definitions
-  const columns: Column<typeof sampleData[0]>[] = [
-    {
-      key: 'name',
-      header: 'Name',
-      sortable: true,
-      filterable: true,
-    },
-    {
-      key: 'email',
-      header: 'Email',
-      sortable: true,
-      filterable: true,
-    },
-    {
-      key: 'role',
-      header: 'Role',
-      sortable: true,
-      filterable: true,
-      cell: (item) => (
-        <DataBadge variant="category" category={item.category as 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8}>
-          {item.role}
-        </DataBadge>
-      ),
-    },
-    {
-      key: 'status',
-      header: 'Status',
-      sortable: true,
-      filterable: true,
-      cell: (item) => {
-        const statusType = {
-          active: 'success',
-          inactive: 'neutral',
-          pending: 'warning',
-        }[item.status] || 'neutral';
-        
-        return (
-          <DataBadge variant="status" status={statusType as 'success' | 'warning' | 'error' | 'info' | 'neutral'}>
-            {item.status}
-          </DataBadge>
-        );
-      },
-    },
-  ];
-
-  return (
-    <div className="space-y-4">
-      <div>
-        <h3 className="text-lg font-medium mb-2">Advanced Data Table</h3>
-        <p className="text-data-meta mb-4">
-          Features: sorting, filtering, pagination, custom cell rendering
-        </p>
-      </div>
-      
-      <DataTable
-        data={sampleData}
-        columns={columns}
-        pageSize={5}
-        searchPlaceholder="Search users..."
-        onRowClick={(item) => console.log('Clicked:', item)}
-      />
-      
-      <div className="mt-6 p-4 bg-muted/30 rounded">
-        <h4 className="text-data-label mb-2">Usage Example</h4>
-        <pre className="text-xs overflow-x-auto">
-{`<DataTable
-  data={users}
-  columns={[
-    { key: 'name', header: 'Name', sortable: true },
-    { key: 'email', header: 'Email', sortable: true },
-    { 
-      key: 'status', 
-      header: 'Status',
-      cell: (item) => <StatusBadge status={item.status} />
-    }
-  ]}
-  pageSize={10}
-  onRowClick={(user) => navigate(\`/users/\${user.id}\`)}
-/>`}
-        </pre>
-      </div>
-    </div>
-  );
-};