Spaces:
Configuration error
Configuration error
File size: 3,750 Bytes
6ce679b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 | // src/components/StatsGrid.tsx
import React, { useContext } from 'react';
import { TrendingUp, FileText, Zap, Target } from 'lucide-react';
import { ThemeContext } from '../contexts/ThemeContext';
import { useUserStats } from '../hooks/useUserStats';
const StatsGrid: React.FC = () => {
const { theme } = useContext(ThemeContext);
const { stats } = useUserStats(); // Live stats from Firestore
const isDark = theme === 'dark';
// --- Safely parse all stats ---
const textsHumanized = Number(stats?.textsHumanized ?? 0);
const wordsProcessed = Number(stats?.wordsProcessed ?? 0);
const totalSessions = Number(stats?.totalSessions ?? 0);
const gptAverage = Number(stats?.gptAverage ?? 0);
// --- Format derived stats ---
const gptAverageDisplay = `${gptAverage.toFixed(1)}%`;
const statItems = [
{
label: 'Texts Humanized',
value: textsHumanized.toLocaleString(),
icon: FileText,
color: 'blue',
change: '+12%',
},
{
label: 'Words Processed',
value: wordsProcessed.toLocaleString(),
icon: Zap,
color: 'green',
change: '+8%',
},
{
label: 'GPT Average',
value: gptAverageDisplay,
icon: Target,
color: 'purple',
change: '+3%',
},
{
label: 'Total Sessions',
value: totalSessions.toLocaleString(),
icon: TrendingUp,
color: 'orange',
change: '+15%',
},
];
const getColorClasses = (color: string) => {
const colors = {
blue: `bg-${isDark ? 'blue-800' : 'blue-50'} text-${
isDark ? 'blue-300' : 'blue-600'
} border-${isDark ? 'blue-700' : 'blue-200'}`,
green: `bg-${isDark ? 'green-800' : 'green-50'} text-${
isDark ? 'green-300' : 'green-600'
} border-${isDark ? 'green-700' : 'green-200'}`,
purple: `bg-${isDark ? 'purple-800' : 'purple-50'} text-${
isDark ? 'purple-300' : 'purple-600'
} border-${isDark ? 'purple-700' : 'purple-200'}`,
orange: `bg-${isDark ? 'orange-800' : 'orange-50'} text-${
isDark ? 'orange-300' : 'orange-600'
} border-${isDark ? 'orange-700' : 'orange-200'}`,
};
return colors[color as keyof typeof colors] || colors.blue;
};
const cardBgClass = isDark
? 'bg-gray-900 border-gray-700 text-white'
: 'bg-white border-gray-200 text-gray-900';
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{statItems.map((item, index) => {
const Icon = item.icon;
return (
<div
key={index}
className={`rounded-xl border p-6 hover:shadow-md transition-shadow ${cardBgClass}`}
>
<div className="flex items-center justify-between mb-4">
<div className={`p-3 rounded-lg ${getColorClasses(item.color)}`}>
<Icon className="w-6 h-6" />
</div>
<span
className={`text-sm font-medium px-2 py-1 rounded ${
isDark
? 'bg-gray-800 text-green-400'
: 'bg-green-50 text-green-600'
}`}
>
{item.change}
</span>
</div>
<div>
<p
className={`text-2xl font-bold mb-1 ${
isDark ? 'text-white' : 'text-gray-900'
}`}
>
{item.value || '0'}
</p>
<p
className={`text-sm ${
isDark ? 'text-gray-300' : 'text-gray-600'
}`}
>
{item.label}
</p>
</div>
</div>
);
})}
</div>
);
};
export default StatsGrid;
|