@libredb/studio 0.9.7

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

@@ -0,0 +1,263 @@
+'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

@@ -0,0 +1,254 @@
+'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>
+  );
+}