@libredb/studio 0.9.7 → 0.9.13

package/src/components/monitoring/tabs/OverviewTab.tsx

@@ -1,263 +0,0 @@
-'use client';
-
-import React from 'react';
-import {
-  Database,
-  Zap,
-  Activity,
-  Clock,
-  Table2,
-  Hash,
-  Server,
-} from 'lucide-react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Progress } from '@/components/ui/progress';
-import { Skeleton } from '@/components/ui/skeleton';
-import type { MonitoringData } from '@/lib/db/types';
-import type { TimeSeriesPoint } from '@/lib/time-series-buffer';
-import { evaluateThreshold, getThresholdColor, DEFAULT_THRESHOLDS } from '@/lib/monitoring-thresholds';
-import { MetricChart } from './MetricChart';
-
-interface OverviewTabProps {
-  data: MonitoringData | null;
-  loading: boolean;
-  history?: TimeSeriesPoint<MonitoringData>[];
-}
-
-export function OverviewTab({ data, loading, history = [] }: OverviewTabProps) {
-  if (loading && !data) {
-    return <OverviewSkeleton />;
-  }
-
-  const overview = data?.overview;
-  const performance = data?.performance;
-
-  const connectionPercent = overview
-    ? Math.round((overview.activeConnections / overview.maxConnections) * 100)
-    : 0;
-
-  // Evaluate thresholds
-  const connThreshold = evaluateThreshold(connectionPercent, DEFAULT_THRESHOLDS.find(t => t.metric === 'connectionPercent')!);
-  const cacheThreshold = evaluateThreshold(performance?.cacheHitRatio ?? 100, DEFAULT_THRESHOLDS.find(t => t.metric === 'cacheHitRatio')!);
-
-  // Build chart data from history
-  const connectionHistory = history.map(h => ({
-    timestamp: h.timestamp,
-    value: h.data.overview?.activeConnections ?? 0,
-  }));
-
-  return (
-    <div className="p-3 sm:p-6 space-y-4 sm:space-y-6">
-      {/* Version & Status */}
-      <div className="flex items-center gap-2 sm:gap-4 flex-wrap">
-        <Badge variant="outline" className="gap-1.5 sm:gap-2 py-1 sm:py-1.5 px-2 sm:px-3 text-xs">
-          <Server className="h-3 w-3 sm:h-4 sm:w-4" />
-          <span className="truncate max-w-[120px] sm:max-w-none">{overview?.version || 'Unknown'}</span>
-        </Badge>
-        <Badge variant="secondary" className="gap-1.5 sm:gap-2 py-1 sm:py-1.5 px-2 sm:px-3 text-xs">
-          <Clock className="h-3 w-3 sm:h-4 sm:w-4" />
-          {overview?.uptime || 'N/A'}
-        </Badge>
-        {data?.timestamp && (
-          <span className="text-[10px] sm:text-xs text-muted-foreground">
-            {new Date(data.timestamp).toLocaleTimeString()}
-          </span>
-        )}
-      </div>
-
-      {/* Main Stats Grid */}
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-2 sm:gap-4">
-        {/* Active Connections */}
-        <Card className={`p-0 border-2 transition-colors ${getThresholdColor(connThreshold)}`}>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-3 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
-              Connections
-            </CardTitle>
-            <Zap className="h-3 w-3 sm:h-4 sm:w-4 text-yellow-500" />
-          </CardHeader>
-          <CardContent className="p-3 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">
-              {overview?.activeConnections ?? 0}
-              <span className="text-xs sm:text-sm font-normal text-muted-foreground">
-                /{overview?.maxConnections ?? 0}
-              </span>
-            </div>
-            <Progress value={connectionPercent} className="h-1 mt-1 sm:mt-2" />
-            <p className="text-[10px] sm:text-xs text-muted-foreground mt-1">
-              {connectionPercent}% used
-            </p>
-          </CardContent>
-        </Card>
-
-        {/* Database Size */}
-        <Card className="p-0">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-3 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
-              DB Size
-            </CardTitle>
-            <Database className="h-3 w-3 sm:h-4 sm:w-4 text-blue-500" />
-          </CardHeader>
-          <CardContent className="p-3 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">{overview?.databaseSize || 'N/A'}</div>
-            <p className="text-[10px] sm:text-xs text-muted-foreground mt-1">
-              Total storage
-            </p>
-          </CardContent>
-        </Card>
-
-        {/* Cache Hit Ratio */}
-        <Card className={`p-0 border-2 transition-colors ${getThresholdColor(cacheThreshold)}`}>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-3 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
-              Cache Hit
-            </CardTitle>
-            <Activity className="h-3 w-3 sm:h-4 sm:w-4 text-green-500" />
-          </CardHeader>
-          <CardContent className="p-3 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">
-              {performance?.cacheHitRatio?.toFixed(1) ?? 0}%
-            </div>
-            <Progress
-              value={performance?.cacheHitRatio ?? 0}
-              className="h-1 mt-1 sm:mt-2"
-            />
-            <p className="text-[10px] sm:text-xs text-muted-foreground mt-1 truncate">
-              {(performance?.cacheHitRatio ?? 0) >= 90
-                ? 'Excellent'
-                : (performance?.cacheHitRatio ?? 0) >= 80
-                  ? 'Good'
-                  : 'Needs tuning'}
-            </p>
-          </CardContent>
-        </Card>
-
-        {/* Tables & Indexes */}
-        <Card className="p-0">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-3 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium text-muted-foreground">
-              Tables
-            </CardTitle>
-            <Table2 className="h-3 w-3 sm:h-4 sm:w-4 text-purple-500" />
-          </CardHeader>
-          <CardContent className="p-3 sm:p-4 pt-0">
-            <div className="text-lg sm:text-2xl font-bold">
-              {overview?.tableCount ?? 0}
-            </div>
-            <p className="text-[10px] sm:text-xs text-muted-foreground mt-1">
-              {overview?.indexCount ?? 0} indexes
-            </p>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Connection Trend Chart */}
-      {connectionHistory.length >= 2 && (
-        <Card className="p-0">
-          <CardHeader className="p-3 sm:p-4 pb-1">
-            <CardTitle className="text-xs sm:text-sm font-medium flex items-center gap-2">
-              <Activity className="h-3 w-3 sm:h-4 sm:w-4" />
-              Connection Trend
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="p-3 sm:p-4 pt-0">
-            <MetricChart data={connectionHistory} color="#eab308" title="Connections" />
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Secondary Stats */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-4">
-        {/* Performance Metrics */}
-        <Card className="p-0">
-          <CardHeader className="p-3 sm:p-4 pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium flex items-center gap-2">
-              <Activity className="h-3 w-3 sm:h-4 sm:w-4" />
-              Performance
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="p-3 sm:p-4 pt-0 space-y-2 sm:space-y-3">
-            <div className="flex justify-between items-center gap-2">
-              <span className="text-xs sm:text-sm text-muted-foreground">Buffer Pool</span>
-              <div className="flex items-center gap-1 sm:gap-2">
-                <Progress
-                  value={performance?.bufferPoolUsage ?? 0}
-                  className="w-16 sm:w-24 h-1.5 sm:h-2"
-                />
-                <span className="text-xs sm:text-sm font-medium w-8 sm:w-12 text-right">
-                  {performance?.bufferPoolUsage?.toFixed(0) ?? 0}%
-                </span>
-              </div>
-            </div>
-            <div className="flex justify-between items-center">
-              <span className="text-xs sm:text-sm text-muted-foreground">Deadlocks</span>
-              <Badge variant={performance?.deadlocks ? 'destructive' : 'secondary'} className="text-xs">
-                {performance?.deadlocks ?? 0}
-              </Badge>
-            </div>
-            <div className="flex justify-between items-center">
-              <span className="text-xs sm:text-sm text-muted-foreground">Checkpoint</span>
-              <span className="text-xs sm:text-sm font-mono truncate max-w-[100px] sm:max-w-none">
-                {performance?.checkpointWriteTime || 'N/A'}
-              </span>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Quick Stats */}
-        <Card className="p-0">
-          <CardHeader className="p-3 sm:p-4 pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium flex items-center gap-2">
-              <Hash className="h-3 w-3 sm:h-4 sm:w-4" />
-              Quick Stats
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="p-3 sm:p-4 pt-0 space-y-2 sm:space-y-3">
-            <div className="flex justify-between items-center">
-              <span className="text-xs sm:text-sm text-muted-foreground">Slow Queries</span>
-              <Badge variant={data?.slowQueries?.length ? 'outline' : 'secondary'} className="text-xs">
-                {data?.slowQueries?.length ?? 0}
-              </Badge>
-            </div>
-            <div className="flex justify-between items-center">
-              <span className="text-xs sm:text-sm text-muted-foreground">Active</span>
-              <Badge variant="secondary" className="text-xs">
-                {data?.activeSessions?.filter((s) => s.state === 'active').length ?? 0}
-              </Badge>
-            </div>
-            <div className="flex justify-between items-center">
-              <span className="text-xs sm:text-sm text-muted-foreground">Idle</span>
-              <Badge variant="secondary" className="text-xs">
-                {data?.activeSessions?.filter((s) => s.state === 'idle').length ?? 0}
-              </Badge>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-}
-
-function OverviewSkeleton() {
-  return (
-    <div className="p-3 sm:p-6 space-y-4 sm:space-y-6">
-      <div className="flex items-center gap-2 sm:gap-4">
-        <Skeleton className="h-6 sm:h-8 w-32 sm:w-48" />
-        <Skeleton className="h-6 sm:h-8 w-20 sm:w-32" />
-      </div>
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-2 sm:gap-4">
-        {[...Array(4)].map((_, i) => (
-          <Card key={i} className="p-0">
-            <CardHeader className="p-3 sm:p-4 pb-1 sm:pb-2">
-              <Skeleton className="h-3 sm:h-4 w-16 sm:w-24" />
-            </CardHeader>
-            <CardContent className="p-3 sm:p-4 pt-0">
-              <Skeleton className="h-5 sm:h-8 w-12 sm:w-20" />
-              <Skeleton className="h-1 w-full mt-2" />
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-    </div>
-  );
-}

package/src/components/monitoring/tabs/PerformanceTab.tsx

@@ -1,254 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Activity, Gauge, Zap, AlertTriangle } from 'lucide-react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Progress } from '@/components/ui/progress';
-import { Skeleton } from '@/components/ui/skeleton';
-import { Badge } from '@/components/ui/badge';
-import type { MonitoringData } from '@/lib/db/types';
-import type { TimeSeriesPoint } from '@/lib/time-series-buffer';
-import { evaluateThreshold, getThresholdColor, DEFAULT_THRESHOLDS } from '@/lib/monitoring-thresholds';
-import { MetricChart } from './MetricChart';
-
-interface PerformanceTabProps {
-  data: MonitoringData | null;
-  loading: boolean;
-  history?: TimeSeriesPoint<MonitoringData>[];
-}
-
-export function PerformanceTab({ data, loading, history = [] }: PerformanceTabProps) {
-  if (loading && !data) {
-    return <PerformanceSkeleton />;
-  }
-
-  const performance = data?.performance;
-
-  const getHealthStatus = (ratio: number) => {
-    if (ratio >= 95) return { label: 'Excellent', color: 'text-green-500', bg: 'bg-green-500' };
-    if (ratio >= 90) return { label: 'Good', color: 'text-blue-500', bg: 'bg-blue-500' };
-    if (ratio >= 80) return { label: 'Fair', color: 'text-yellow-500', bg: 'bg-yellow-500' };
-    return { label: 'Poor', color: 'text-red-500', bg: 'bg-red-500' };
-  };
-
-  const cacheStatus = getHealthStatus(performance?.cacheHitRatio ?? 0);
-  const bufferStatus = getHealthStatus(performance?.bufferPoolUsage ?? 0);
-
-  // Threshold evaluations
-  const cacheThreshold = evaluateThreshold(performance?.cacheHitRatio ?? 100, DEFAULT_THRESHOLDS.find(t => t.metric === 'cacheHitRatio')!);
-  const bufferThreshold = evaluateThreshold(performance?.bufferPoolUsage ?? 0, DEFAULT_THRESHOLDS.find(t => t.metric === 'bufferPoolUsage')!);
-  const deadlockThreshold = evaluateThreshold(performance?.deadlocks ?? 0, DEFAULT_THRESHOLDS.find(t => t.metric === 'deadlocks')!);
-
-  // Build trend data from history
-  const cacheHistory = history.map(h => ({ timestamp: h.timestamp, value: h.data.performance?.cacheHitRatio ?? 0 }));
-  const bufferHistory = history.map(h => ({ timestamp: h.timestamp, value: h.data.performance?.bufferPoolUsage ?? 0 }));
-  const deadlockHistory = history.map(h => ({ timestamp: h.timestamp, value: h.data.performance?.deadlocks ?? 0 }));
-
-  return (
-    <div className="p-3 sm:p-6 space-y-4 sm:space-y-6">
-      {/* Key Metrics */}
-      <div className="grid grid-cols-3 gap-2 sm:gap-4">
-        {/* Cache Hit Ratio */}
-        <Card className={`p-0 border-2 transition-colors ${getThresholdColor(cacheThreshold)}`}>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
-              Cache Hit
-            </CardTitle>
-            <Activity className={`h-3 w-3 sm:h-4 sm:w-4 ${cacheStatus.color}`} />
-          </CardHeader>
-          <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="flex items-end gap-1">
-              <span className="text-lg sm:text-3xl font-bold">
-                {performance?.cacheHitRatio?.toFixed(1) ?? 0}
-              </span>
-              <span className="text-sm sm:text-xl text-muted-foreground">%</span>
-            </div>
-            <Progress
-              value={performance?.cacheHitRatio ?? 0}
-              className="h-1 sm:h-2 mt-1 sm:mt-3"
-            />
-            <div className="flex items-center justify-between mt-1 sm:mt-2">
-              <Badge variant="outline" className={`${cacheStatus.color} text-[10px] sm:text-xs`}>
-                {cacheStatus.label}
-              </Badge>
-              <span className="text-[10px] sm:text-xs text-muted-foreground hidden sm:inline">95%+</span>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Buffer Pool Usage */}
-        <Card className={`p-0 border-2 transition-colors ${getThresholdColor(bufferThreshold)}`}>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
-              Buffer
-            </CardTitle>
-            <Gauge className={`h-3 w-3 sm:h-4 sm:w-4 ${bufferStatus.color}`} />
-          </CardHeader>
-          <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="flex items-end gap-1">
-              <span className="text-lg sm:text-3xl font-bold">
-                {performance?.bufferPoolUsage?.toFixed(0) ?? 0}
-              </span>
-              <span className="text-sm sm:text-xl text-muted-foreground">%</span>
-            </div>
-            <Progress
-              value={performance?.bufferPoolUsage ?? 0}
-              className="h-1 sm:h-2 mt-1 sm:mt-3"
-            />
-            <div className="flex items-center justify-between mt-1 sm:mt-2">
-              <Badge variant="outline" className={`${bufferStatus.color} text-[10px] sm:text-xs`}>
-                {bufferStatus.label}
-              </Badge>
-              <span className="text-[10px] sm:text-xs text-muted-foreground hidden sm:inline">Cache</span>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Deadlocks */}
-        <Card className={`p-0 border-2 transition-colors ${getThresholdColor(deadlockThreshold)}`}>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 p-2 sm:p-4 pb-1 sm:pb-2">
-            <CardTitle className="text-[10px] sm:text-sm font-medium text-muted-foreground">
-              Deadlocks
-            </CardTitle>
-            <AlertTriangle
-              className={`h-3 w-3 sm:h-4 sm:w-4 ${performance?.deadlocks ? 'text-red-500' : 'text-green-500'}`}
-            />
-          </CardHeader>
-          <CardContent className="p-2 sm:p-4 pt-0">
-            <div className="flex items-end gap-1">
-              <span className="text-lg sm:text-3xl font-bold">
-                {performance?.deadlocks ?? 0}
-              </span>
-            </div>
-            <p className="text-[10px] sm:text-xs text-muted-foreground mt-1 sm:mt-3 hidden sm:block">
-              {performance?.deadlocks
-                ? 'Review queries'
-                : 'None detected'}
-            </p>
-            <Badge
-              variant={performance?.deadlocks ? 'destructive' : 'secondary'}
-              className="mt-1 sm:mt-2 text-[10px] sm:text-xs"
-            >
-              {performance?.deadlocks ? 'Attention' : 'Healthy'}
-            </Badge>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Trend Charts */}
-      {history.length >= 2 && (
-        <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 sm:gap-4">
-          <Card className="p-0">
-            <CardHeader className="p-2 sm:p-3 pb-0">
-              <CardTitle className="text-[10px] sm:text-xs font-medium text-muted-foreground">Cache Hit Trend</CardTitle>
-            </CardHeader>
-            <CardContent className="p-2 sm:p-3 pt-0">
-              <MetricChart data={cacheHistory} color="#22c55e" title="Cache Hit" unit="%" />
-            </CardContent>
-          </Card>
-          <Card className="p-0">
-            <CardHeader className="p-2 sm:p-3 pb-0">
-              <CardTitle className="text-[10px] sm:text-xs font-medium text-muted-foreground">Buffer Pool Trend</CardTitle>
-            </CardHeader>
-            <CardContent className="p-2 sm:p-3 pt-0">
-              <MetricChart data={bufferHistory} color="#3b82f6" title="Buffer Pool" unit="%" />
-            </CardContent>
-          </Card>
-          <Card className="p-0">
-            <CardHeader className="p-2 sm:p-3 pb-0">
-              <CardTitle className="text-[10px] sm:text-xs font-medium text-muted-foreground">Deadlock Trend</CardTitle>
-            </CardHeader>
-            <CardContent className="p-2 sm:p-3 pt-0">
-              <MetricChart data={deadlockHistory} color="#ef4444" title="Deadlocks" />
-            </CardContent>
-          </Card>
-        </div>
-      )}
-
-      {/* Additional Metrics */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-4">
-        {/* Checkpoint Stats */}
-        <Card className="p-0">
-          <CardHeader className="p-3 sm:p-4 pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium flex items-center gap-2">
-              <Zap className="h-3 w-3 sm:h-4 sm:w-4" />
-              Checkpoint Stats
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="p-3 sm:p-4 pt-0 space-y-2 sm:space-y-4">
-            <div className="p-2 sm:p-4 bg-muted/30 rounded-lg">
-              <p className="text-[10px] sm:text-sm text-muted-foreground">Write & Sync</p>
-              <p className="text-sm sm:text-lg font-mono mt-1 truncate">
-                {performance?.checkpointWriteTime || 'N/A'}
-              </p>
-            </div>
-            <p className="text-[10px] sm:text-xs text-muted-foreground hidden sm:block">
-              Checkpoint write time affects database performance during heavy writes.
-            </p>
-          </CardContent>
-        </Card>
-
-        {/* Performance Tips */}
-        <Card className="p-0">
-          <CardHeader className="p-3 sm:p-4 pb-2">
-            <CardTitle className="text-xs sm:text-sm font-medium flex items-center gap-2">
-              <Activity className="h-3 w-3 sm:h-4 sm:w-4" />
-              Tips
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="p-3 sm:p-4 pt-0 space-y-2 sm:space-y-3">
-            {(performance?.cacheHitRatio ?? 100) < 90 && (
-              <div className="flex items-start gap-2 p-2 bg-yellow-500/10 rounded-md">
-                <AlertTriangle className="h-3 w-3 sm:h-4 sm:w-4 text-yellow-500 mt-0.5 flex-shrink-0" />
-                <div>
-                  <p className="text-xs sm:text-sm font-medium">Low Cache Hit</p>
-                  <p className="text-[10px] sm:text-xs text-muted-foreground hidden sm:block">
-                    Increase shared_buffers
-                  </p>
-                </div>
-              </div>
-            )}
-            {(performance?.deadlocks ?? 0) > 0 && (
-              <div className="flex items-start gap-2 p-2 bg-red-500/10 rounded-md">
-                <AlertTriangle className="h-3 w-3 sm:h-4 sm:w-4 text-red-500 mt-0.5 flex-shrink-0" />
-                <div>
-                  <p className="text-xs sm:text-sm font-medium">Deadlocks</p>
-                  <p className="text-[10px] sm:text-xs text-muted-foreground hidden sm:block">
-                    Review lock ordering
-                  </p>
-                </div>
-              </div>
-            )}
-            {(performance?.cacheHitRatio ?? 0) >= 90 && !(performance?.deadlocks) && (
-              <div className="flex items-center gap-2 p-2 bg-green-500/10 rounded-md">
-                <Activity className="h-3 w-3 sm:h-4 sm:w-4 text-green-500 flex-shrink-0" />
-                <p className="text-xs sm:text-sm">Performing well!</p>
-              </div>
-            )}
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-}
-
-function PerformanceSkeleton() {
-  return (
-    <div className="p-3 sm:p-6 space-y-4 sm:space-y-6">
-      <div className="grid grid-cols-3 gap-2 sm:gap-4">
-        {[...Array(3)].map((_, i) => (
-          <Card key={i} className="p-0">
-            <CardHeader className="p-2 sm:p-4 pb-1 sm:pb-2">
-              <Skeleton className="h-3 sm:h-4 w-12 sm:w-24" />
-            </CardHeader>
-            <CardContent className="p-2 sm:p-4 pt-0">
-              <Skeleton className="h-5 sm:h-10 w-10 sm:w-24" />
-              <Skeleton className="h-1 sm:h-2 w-full mt-1 sm:mt-3" />
-              <Skeleton className="h-4 sm:h-6 w-12 sm:w-20 mt-1 sm:mt-2" />
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-    </div>
-  );
-}