@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.8 → 0.2.10

package/dist/components/ui/performance-demo.esm.js

@@ -11,7 +11,7 @@ import {
 } from '../../hooks'
 import { useDevice } from '../../hooks/use-device'
 
-export const PerformanceDemo= () => {
+export const PerformanceDemo: React.FC = () => {
   const [activeTab, setActiveTab] = useState<'overview' | 'fps' | 'memory' | 'battery' | 'throttling'>('overview')
   const [showRecommendations, setShowRecommendations] = useState(false)
   
@@ -24,46 +24,53 @@ export const PerformanceDemo= () => {
     performanceMode,
     getOptimizationRecommendations
   } = usePerformance({
-    callbacks) => console.warn(`FPS Warning}`),
-      onMemoryWarning) => console.warn(`Memory Warning).toFixed(1)}%`),
-      onBatteryLow) => console.warn(`Battery Low).toFixed(1)}%`),
-      onPerformanceModeChange) => console.log(`Performance mode changed to}`),
-      onThrottlingChange, reason) => console.log(`Throttling ${enabled ? 'enabled' }}`)
+    callbacks: {
+      onFPSWarning: (fps) => console.warn(`FPS Warning: ${fps}`),
+      onMemoryWarning: (usage) => console.warn(`Memory Warning: ${(usage * 100).toFixed(1)}%`),
+      onBatteryLow: (level) => console.warn(`Battery Low: ${(level * 100).toFixed(1)}%`),
+      onPerformanceModeChange: (mode) => console.log(`Performance mode changed to: ${mode}`),
+      onThrottlingChange: (enabled, reason) => console.log(`Throttling ${enabled ? 'enabled' : 'disabled'}: ${reason}`)
     }
   })
 
   // Specialized hooks
   const {
-    metrics,
-    performanceScore,
-    getPerformanceInsights} = useFrameRate({
-    callbacks) => console.warn(`Frame rate warning} FPS`),
-      onFPSDrop, previous) => console.warn(`FPS drop detected} → ${fps}`)
+    metrics: fpsMetrics,
+    performanceScore: fpsScore,
+    getPerformanceInsights: getFPSInsights
+  } = useFrameRate({
+    callbacks: {
+      onFPSWarning: (fps) => console.warn(`Frame rate warning: ${fps} FPS`),
+      onFPSDrop: (fps, previous) => console.warn(`FPS drop detected: ${previous} → ${fps}`)
     }
   })
 
   const {
-    metrics,
+    metrics: memoryMetrics,
     memoryTrend,
     memoryLeakDetected,
-    getOptimizationRecommendations,
-    getCleanupSuggestions} = useMemoryUsage({
-    callbacks) => console.warn(`Memory usage warning).toFixed(1)}%`),
-      onMemoryLeakDetected) => console.warn(`Memory leak detected} trend`)
+    getOptimizationRecommendations: getMemoryRecommendations,
+    getCleanupSuggestions: getMemoryCleanupSuggestions
+  } = useMemoryUsage({
+    callbacks: {
+      onMemoryWarning: (usage) => console.warn(`Memory usage warning: ${(usage * 100).toFixed(1)}%`),
+      onMemoryLeakDetected: (trend) => console.warn(`Memory leak detected: ${trend} trend`)
     }
   })
 
   const {
-    metrics,
+    metrics: batteryMetrics,
     batteryLevel,
     isCharging,
     isLowPowerMode,
     isCriticalBattery,
-    getOptimizationRecommendations,
-    getPowerSavingSuggestions,
-    getBatteryStatus} = useBatteryStatus({
-    callbacks) => console.warn(`Battery low).toFixed(1)}%`),
-      onBatteryCritical) => console.error(`Battery critical).toFixed(1)}%`)
+    getOptimizationRecommendations: getBatteryRecommendations,
+    getPowerSavingSuggestions: getBatteryPowerSuggestions,
+    getBatteryStatus: getBatteryStatusText
+  } = useBatteryStatus({
+    callbacks: {
+      onBatteryLow: (level) => console.warn(`Battery low: ${(level * 100).toFixed(1)}%`),
+      onBatteryCritical: (level) => console.error(`Battery critical: ${(level * 100).toFixed(1)}%`)
     }
   })
 
@@ -76,42 +83,61 @@ export const PerformanceDemo= () => {
     performanceSettings,
 
   } = usePerformanceThrottling({
-    enablePerformanceMonitoring,
-    enableAutomaticThrottling,
-    enableUserExperienceOptimization,
-    enableBatteryPreservation}, {
-    onPerformanceWarning) => console.log('Performance warning, metrics),
-    onThrottlingApplied, reason) => console.log('Throttling applied, level, reason),
-    onPerformanceRecovery) => console.log('Performance recovery, metrics),
-    onUserExperienceOptimized) => console.log('User experience optimized, optimization)
+    enablePerformanceMonitoring: true,
+    enableAutomaticThrottling: true,
+    enableUserExperienceOptimization: true,
+    enableBatteryPreservation: true
+  }, {
+    onPerformanceWarning: (metrics) => console.log('Performance warning:', metrics),
+    onThrottlingApplied: (level, reason) => console.log('Throttling applied:', level, reason),
+    onPerformanceRecovery: (metrics) => console.log('Performance recovery:', metrics),
+    onUserExperienceOptimized: (optimization) => console.log('User experience optimized:', optimization)
   })
 
   // Performance score color mapping
-  const getScoreColor = (score) => {
+  const getScoreColor = (score: string) => {
     switch (score) {
-      case 'excellent'}
+      case 'excellent': return 'text-green-600 bg-green-100'
+      case 'good': return 'text-blue-600 bg-blue-100'
+      case 'fair': return 'text-yellow-600 bg-yellow-100'
+      case 'poor': return 'text-red-600 bg-red-100'
+      default: return 'text-gray-600 bg-gray-100'
+    }
   }
 
   // Performance mode color mapping
-  const getModeColor = (mode) => {
+  const getModeColor = (mode: string) => {
     switch (mode) {
-      case 'high'}
+      case 'high': return 'text-green-600 bg-green-100'
+      case 'medium': return 'text-yellow-600 bg-yellow-100'
+      case 'low': return 'text-red-600 bg-red-100'
+      default: return 'text-gray-600 bg-gray-100'
+    }
   }
 
   // Throttling level color mapping
-  const getThrottlingColor = (level) => {
+  const getThrottlingColor = (level: string) => {
     switch (level) {
-      case 'none'}
+      case 'none': return 'text-green-600 bg-green-100'
+      case 'light': return 'text-blue-600 bg-blue-100'
+      case 'moderate': return 'text-yellow-600 bg-yellow-100'
+      case 'aggressive': return 'text-red-600 bg-red-100'
+      default: return 'text-gray-600 bg-gray-100'
+    }
   }
 
   // Memory trend icon
-  const getMemoryTrendIcon = (trend) => {
+  const getMemoryTrendIcon = (trend: string) => {
     switch (trend) {
-      case 'increasing'}
+      case 'increasing': return '📈'
+      case 'decreasing': return '📉'
+      case 'stable': return '➡️'
+      default: return '❓'
+    }
   }
 
   // Battery icon
-  const getBatteryIcon = (level, charging) => {
+  const getBatteryIcon = (level: number, charging: boolean) => {
     if (charging) return '🔌'
     if (level <= 0.15) return '🔴'
     if (level <= 0.3) return '🟠'
@@ -120,11 +146,11 @@ export const PerformanceDemo= () => {
   }
 
   const tabs = [
-    { id, label, icon},
-    { id, label, icon},
-    { id, label, icon},
-    { id, label, icon},
-    { id, label, icon}
+    { id: 'overview', label: 'Overview', icon: '📊' },
+    { id: 'fps', label: 'Frame Rate', icon: '🎬' },
+    { id: 'memory', label: 'Memory', icon: '🧠' },
+    { id: 'battery', label: 'Battery', icon: '🔋' },
+    { id: 'throttling', label: 'Throttling', icon: '⚡' }
   ]
 
   return (
@@ -134,7 +160,7 @@ export const PerformanceDemo= () => {
         {tabs.map((tab) => (
           <Button
             key={tab.id}
-            variant={activeTab === tab.id ? 'default' }
+            variant={activeTab === tab.id ? 'default' : 'outline'}
             size="sm"
             onClick={() => setActiveTab(tab.id as any)}
             className="flex items-center gap-2"
@@ -153,7 +179,7 @@ export const PerformanceDemo= () => {
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
                 🎯 Performance Summary
-                <Badge variant={performanceMode === 'high' ? 'default' }>
+                <Badge variant={performanceMode === 'high' ? 'default' : 'secondary'}>
                   {performanceMode.toUpperCase()} MODE
                 </Badge>
               </CardTitle>
@@ -162,7 +188,8 @@ export const PerformanceDemo= () => {
               </CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
-              <div className="grid grid-cols-1 md}
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                {/* FPS Status */}
                 <div className="text-center p-4 border rounded-lg">
                   <div className="text-2xl font-bold text-blue-600">{fpsMetrics.fps}</div>
                   <div className="text-sm text-gray-600">FPS</div>
@@ -174,13 +201,13 @@ export const PerformanceDemo= () => {
                 {/* Memory Status */}
                 <div className="text-center p-4 border rounded-lg">
                   <div className="text-2xl font-bold text-purple-600">
-                    {memoryMetrics.memoryPercentage ? memoryMetrics.memoryPercentage.toFixed(1) }%
+                    {memoryMetrics.memoryPercentage ? memoryMetrics.memoryPercentage.toFixed(1) : 'N/A'}%
                   </div>
                   <div className="text-sm text-gray-600">Memory Usage</div>
                   <div className="flex items-center justify-center gap-1 mt-2">
                     <span>{getMemoryTrendIcon(memoryTrend)}</span>
-                    <Badge variant={memoryLeakDetected ? 'destructive' }>
-                      {memoryLeakDetected ? 'Leak Detected' }
+                    <Badge variant={memoryLeakDetected ? 'destructive' : 'secondary'}>
+                      {memoryLeakDetected ? 'Leak Detected' : memoryTrend}
                     </Badge>
                   </div>
                 </div>
@@ -191,7 +218,7 @@ export const PerformanceDemo= () => {
                     {getBatteryIcon(batteryLevel || 1, isCharging)}
                   </div>
                   <div className="text-sm text-gray-600">Battery</div>
-                  <Badge variant={isCriticalBattery ? 'destructive' }>
+                  <Badge variant={isCriticalBattery ? 'destructive' : isLowPowerMode ? 'secondary' : 'default'}>
                     {getBatteryStatusText()}
                   </Badge>
                 </div>
@@ -216,13 +243,14 @@ export const PerformanceDemo= () => {
                 onClick={() => setShowRecommendations(!showRecommendations)}
                 className="w-full"
               >
-                {showRecommendations ? 'Hide' } Performance Recommendations
+                {showRecommendations ? 'Hide' : 'Show'} Performance Recommendations
               </Button>
 
               {/* Performance Recommendations */}
               {showRecommendations && (
                 <div className="space-y-3">
-                  <h4 className="font-medium text-gray-900">Optimization Recommendations="space-y-2 text-sm text-gray-700">
+                  <h4 className="font-medium text-gray-900">Optimization Recommendations:</h4>
+                  <ul className="space-y-2 text-sm text-gray-700">
                     {getOptimizationRecommendations().map((rec, index) => (
                       <li key={index} className="flex items-start gap-2">
                         <span className="text-blue-500">•</span>
@@ -243,16 +271,18 @@ export const PerformanceDemo= () => {
               </CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="grid grid-cols-1 md="font-medium">Device Type}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+                <div>
+                  <span className="font-medium">Device Type:</span> {device.screenSize}
                 </div>
                 <div>
-                  <span className="font-medium">Screen Size}
+                  <span className="font-medium">Screen Size:</span> {device.screenSize}
                 </div>
                 <div>
-                  <span className="font-medium">Orientation}
+                  <span className="font-medium">Orientation:</span> {device.orientation}
                 </div>
                 <div>
-                  <span className="font-medium">Touch Device}
+                  <span className="font-medium">Touch Device:</span> {device.touchDevice ? 'Yes' : 'No'}
                 </div>
               </div>
             </CardContent>
@@ -275,7 +305,8 @@ export const PerformanceDemo= () => {
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
-            <div className="grid grid-cols-2 md="text-center p-3 border rounded-lg">
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <div className="text-center p-3 border rounded-lg">
                 <div className="text-xl font-bold text-blue-600">{fpsMetrics.fps}</div>
                 <div className="text-xs text-gray-600">Current FPS</div>
               </div>
@@ -294,7 +325,8 @@ export const PerformanceDemo= () => {
             </div>
 
             <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
-              <h4 className="font-medium text-blue-800 mb-2">Performance Insights="space-y-1 text-sm text-blue-700">
+              <h4 className="font-medium text-blue-800 mb-2">Performance Insights:</h4>
+              <ul className="space-y-1 text-sm text-blue-700">
                 {getFPSInsights().map((insight, index) => (
                   <li key={index} className="flex items-start gap-2">
                     <span className="text-blue-500">•</span>
@@ -313,8 +345,8 @@ export const PerformanceDemo= () => {
           <CardHeader>
             <CardTitle className="flex items-center gap-2">
               🧠 Memory Usage Monitoring
-              <Badge variant={memoryLeakDetected ? 'destructive' }>
-                {memoryLeakDetected ? 'LEAK DETECTED' )}
+              <Badge variant={memoryLeakDetected ? 'destructive' : 'secondary'}>
+                {memoryLeakDetected ? 'LEAK DETECTED' : memoryTrend.toUpperCase()}
               </Badge>
             </CardTitle>
             <CardDescription>
@@ -322,28 +354,30 @@ export const PerformanceDemo= () => {
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
-            <div className="grid grid-cols-1 md="text-center p-3 border rounded-lg">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="text-center p-3 border rounded-lg">
                 <div className="text-xl font-bold text-purple-600">
-                  {memoryMetrics.memoryPercentage ? memoryMetrics.memoryPercentage.toFixed(1) }%
+                  {memoryMetrics.memoryPercentage ? memoryMetrics.memoryPercentage.toFixed(1) : 'N/A'}%
                 </div>
                 <div className="text-xs text-gray-600">Usage</div>
               </div>
               <div className="text-center p-3 border rounded-lg">
                 <div className="text-xl font-bold text-blue-600">
-                  {memoryMetrics.usedJSHeapSize ? (memoryMetrics.usedJSHeapSize / 1024 / 1024).toFixed(1) } MB
+                  {memoryMetrics.usedJSHeapSize ? (memoryMetrics.usedJSHeapSize / 1024 / 1024).toFixed(1) : 'N/A'} MB
                 </div>
                 <div className="text-xs text-gray-600">Used</div>
               </div>
               <div className="text-center p-3 border rounded-lg">
                 <div className="text-xl font-bold text-green-600">
-                  {memoryMetrics.jsHeapSizeLimit ? (memoryMetrics.jsHeapSizeLimit / 1024 / 1024).toFixed(1) } MB
+                  {memoryMetrics.jsHeapSizeLimit ? (memoryMetrics.jsHeapSizeLimit / 1024 / 1024).toFixed(1) : 'N/A'} MB
                 </div>
                 <div className="text-xs text-gray-600">Limit</div>
               </div>
             </div>
 
             <div className="p-4 bg-purple-50 border border-purple-200 rounded-lg">
-              <h4 className="font-medium text-purple-800 mb-2">Memory Optimization="space-y-1 text-sm text-purple-700">
+              <h4 className="font-medium text-purple-800 mb-2">Memory Optimization:</h4>
+              <ul className="space-y-1 text-sm text-purple-700">
                 {getMemoryRecommendations().map((rec, index) => (
                   <li key={index} className="flex items-start gap-2">
                     <span className="text-purple-500">•</span>
@@ -355,7 +389,8 @@ export const PerformanceDemo= () => {
 
             {memoryLeakDetected && (
               <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
-                <h4 className="font-medium text-red-800 mb-2">Memory Leak Cleanup Suggestions="space-y-1 text-sm text-red-700">
+                <h4 className="font-medium text-red-800 mb-2">Memory Leak Cleanup Suggestions:</h4>
+                <ul className="space-y-1 text-sm text-red-700">
                   {getMemoryCleanupSuggestions().map((suggestion, index) => (
                     <li key={index} className="flex items-start gap-2">
                       <span className="text-red-500">•</span>
@@ -375,7 +410,7 @@ export const PerformanceDemo= () => {
           <CardHeader>
             <CardTitle className="flex items-center gap-2">
               🔋 Battery Status Monitoring
-              <Badge variant={isCriticalBattery ? 'destructive' }>
+              <Badge variant={isCriticalBattery ? 'destructive' : isLowPowerMode ? 'secondary' : 'default'}>
                 {getBatteryStatusText()}
               </Badge>
             </CardTitle>
@@ -384,16 +419,17 @@ export const PerformanceDemo= () => {
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
-            <div className="grid grid-cols-1 md="text-center p-3 border rounded-lg">
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+              <div className="text-center p-3 border rounded-lg">
                 <div className="text-2xl">{getBatteryIcon(batteryLevel || 1, isCharging)}</div>
                 <div className="text-xl font-bold text-green-600">
-                  {batteryLevel ? (batteryLevel * 100).toFixed(1) }%
+                  {batteryLevel ? (batteryLevel * 100).toFixed(1) : 'N/A'}%
                 </div>
                 <div className="text-xs text-gray-600">Level</div>
               </div>
               <div className="text-center p-3 border rounded-lg">
                 <div className="text-xl font-bold text-blue-600">
-                  {isCharging ? 'Yes' }
+                  {isCharging ? 'Yes' : 'No'}
                 </div>
                 <div className="text-xs text-gray-600">Charging</div>
               </div>
@@ -412,7 +448,8 @@ export const PerformanceDemo= () => {
             </div>
 
             <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
-              <h4 className="font-medium text-green-800 mb-2">Battery Optimization="space-y-1 text-sm text-green-700">
+              <h4 className="font-medium text-green-800 mb-2">Battery Optimization:</h4>
+              <ul className="space-y-1 text-sm text-green-700">
                 {getBatteryRecommendations().map((rec, index) => (
                   <li key={index} className="flex items-start gap-2">
                     <span className="text-green-500">•</span>
@@ -424,7 +461,8 @@ export const PerformanceDemo= () => {
 
             {(isLowPowerMode || isCriticalBattery) && (
               <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
-                <h4 className="font-medium text-yellow-800 mb-2">Power Saving Suggestions="space-y-1 text-sm text-yellow-700">
+                <h4 className="font-medium text-yellow-800 mb-2">Power Saving Suggestions:</h4>
+                <ul className="space-y-1 text-sm text-yellow-700">
                   {getBatteryPowerSuggestions().map((suggestion, index) => (
                     <li key={index} className="flex items-start gap-2">
                       <span className="text-yellow-500">•</span>
@@ -453,9 +491,10 @@ export const PerformanceDemo= () => {
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
-            <div className="grid grid-cols-1 md="text-center p-3 border rounded-lg">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="text-center p-3 border rounded-lg">
                 <div className="text-xl font-bold text-blue-600">
-                  {isThrottling ? 'Active' }
+                  {isThrottling ? 'Active' : 'Inactive'}
                 </div>
                 <div className="text-xs text-gray-600">Throttling Status</div>
               </div>
@@ -467,7 +506,7 @@ export const PerformanceDemo= () => {
               </div>
               <div className="text-center p-3 border rounded-lg">
                 <div className="text-xl font-bold text-green-600">
-                  {performanceSettings.memoryOptimization ? 'Yes' }
+                  {performanceSettings.memoryOptimization ? 'Yes' : 'No'}
                 </div>
                 <div className="text-xs text-gray-600">Battery Optimized</div>
               </div>
@@ -483,7 +522,7 @@ export const PerformanceDemo= () => {
               </div>
               <div className="text-center p-3 border rounded-lg">
                 <div className="text-lg font-bold text-green-600">
-                  {isThrottling ? 'Active' }
+                  {isThrottling ? 'Active' : 'Inactive'}
                 </div>
                 <div className="text-xs text-gray-600">Throttling Status</div>
               </div>
@@ -491,18 +530,23 @@ export const PerformanceDemo= () => {
 
             {/* Performance Settings */}
             <div className="space-y-2">
-              <h4 className="font-medium text-gray-900">Performance Settings="grid grid-cols-2 gap-4 text-sm">
+              <h4 className="font-medium text-gray-900">Performance Settings:</h4>
+              <div className="grid grid-cols-2 gap-4 text-sm">
                 <div>
-                  <span className="font-medium">Max Concurrent Animations="text-blue-600">{performanceSettings.maxConcurrentAnimations}</div>
+                  <span className="font-medium">Max Concurrent Animations:</span>
+                  <div className="text-blue-600">{performanceSettings.maxConcurrentAnimations}</div>
                 </div>
                 <div>
-                  <span className="font-medium">Frame Rate Limit="text-blue-600">{performanceSettings.frameRateLimit}fps</div>
+                  <span className="font-medium">Frame Rate Limit:</span>
+                  <div className="text-blue-600">{performanceSettings.frameRateLimit}fps</div>
                 </div>
                 <div>
-                  <span className="font-medium">Animation Quality="text-blue-600">{performanceSettings.animationQuality}</div>
+                  <span className="font-medium">Animation Quality:</span>
+                  <div className="text-blue-600">{performanceSettings.animationQuality}</div>
                 </div>
                 <div>
-                  <span className="font-medium">Memory Optimization="text-blue-600">{performanceSettings.memoryOptimization ? 'Yes' }</div>
+                  <span className="font-medium">Memory Optimization:</span>
+                  <div className="text-blue-600">{performanceSettings.memoryOptimization ? 'Yes' : 'No'}</div>
                 </div>
               </div>
             </div>
@@ -510,17 +554,19 @@ export const PerformanceDemo= () => {
             {/* Throttling Information */}
             {isThrottling && (
               <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
-                <h4 className="font-medium text-yellow-800 mb-2">Throttling Information="text-sm text-yellow-700 space-y-1">
-                  <div><strong>Level}</div>
-                  <div><strong>Performance Score}</div>
-                  <div><strong>FPS}</div>
+                <h4 className="font-medium text-yellow-800 mb-2">Throttling Information:</h4>
+                <div className="text-sm text-yellow-700 space-y-1">
+                  <div><strong>Level:</strong> {throttleLevel}</div>
+                  <div><strong>Performance Score:</strong> {metrics.performanceScore}</div>
+                  <div><strong>FPS:</strong> {metrics.fps}</div>
                 </div>
               </div>
             )}
 
             {/* Recommendations */}
             <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
-              <h4 className="font-medium text-blue-800 mb-2">Throttling Recommendations="space-y-1 text-sm text-blue-700">
+              <h4 className="font-medium text-blue-800 mb-2">Throttling Recommendations:</h4>
+              <ul className="space-y-1 text-sm text-blue-700">
                 {recommendations.map((rec, index) => (
                   <li key={index} className="flex items-start gap-2">
                     <span className="text-blue-500">•</span>
@@ -532,7 +578,8 @@ export const PerformanceDemo= () => {
 
             {/* Optimization Suggestions */}
             <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
-              <h4 className="font-medium text-green-800 mb-2">Optimization Suggestions="space-y-1 text-sm text-green-700">
+              <h4 className="font-medium text-green-800 mb-2">Optimization Suggestions:</h4>
+              <ul className="space-y-1 text-sm text-green-700">
                 {optimizations.map((suggestion, index) => (
                   <li key={index} className="flex items-start gap-2">
                     <span className="text-green-500">•</span>