lyker189
b6ef4ff7a5
- Replaced hardcoded UI strings with translation keys across frontend files - Added and updated English(en) and Khmer(km) translation files for settings, notifications, and server components - Improved localization and multi-language support throughout the frontend
104 lines
3.9 KiB
TypeScript
104 lines
3.9 KiB
TypeScript
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Container, Play, Square, AlertTriangle } from "lucide-react";
|
|
import { DockerStats } from "@/types/docker.types";
|
|
import { useTheme } from "@/contexts/ThemeContext";
|
|
import { useLanguage } from "@/contexts/LanguageContext";
|
|
|
|
interface DockerStatsCardsProps {
|
|
stats: DockerStats;
|
|
}
|
|
|
|
export const DockerStatsCards = ({ stats }: DockerStatsCardsProps) => {
|
|
const { theme } = useTheme();
|
|
const { t } = useLanguage();
|
|
|
|
const cards = [
|
|
{
|
|
title: t('totalContainers', 'docker'),
|
|
value: stats.total,
|
|
icon: Container,
|
|
color: "text-blue-600",
|
|
gradient: theme === 'dark'
|
|
? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(59, 130, 246, 0.6) 100%)"
|
|
: "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #3b82f6 100%)"
|
|
},
|
|
{
|
|
title: t('running', 'docker'),
|
|
value: stats.running,
|
|
icon: Play,
|
|
color: "text-green-600",
|
|
gradient: theme === 'dark'
|
|
? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(16, 185, 129, 0.6) 100%)"
|
|
: "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #10b981 100%)"
|
|
},
|
|
{
|
|
title: t('stopped', 'docker'),
|
|
value: stats.stopped,
|
|
icon: Square,
|
|
color: "text-gray-600",
|
|
gradient: theme === 'dark'
|
|
? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(107, 114, 128, 0.6) 100%)"
|
|
: "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #6b7280 100%)"
|
|
},
|
|
{
|
|
title: t('warning', 'docker'),
|
|
value: stats.warning,
|
|
icon: AlertTriangle,
|
|
color: "text-amber-600",
|
|
gradient: theme === 'dark'
|
|
? "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, rgba(245, 158, 11, 0.6) 100%)"
|
|
: "linear-gradient(135deg, rgba(65, 59, 55, 0.8) 0%, #f59e0b 100%)"
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
|
|
{cards.map((card) => {
|
|
const IconComponent = card.icon;
|
|
return (
|
|
<Card
|
|
key={card.title}
|
|
className="border-none rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 relative"
|
|
style={{ background: card.gradient }}
|
|
>
|
|
{/* Grid Pattern Overlay */}
|
|
<div className="absolute inset-0 z-0 opacity-10">
|
|
<div
|
|
className="w-full h-full"
|
|
style={{
|
|
backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
|
|
backgroundSize: '20px 20px'
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative z-10">
|
|
<CardTitle className="text-sm font-medium text-white/70">
|
|
{card.title}
|
|
</CardTitle>
|
|
<div className="p-2.5 rounded-xl bg-white/20 backdrop-blur-sm shadow-sm transition-all duration-300 group-hover:scale-110">
|
|
<IconComponent className="h-4 w-4 text-white" />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="relative z-10">
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-2xl font-bold text-white">
|
|
{card.value}
|
|
</div>
|
|
<Badge
|
|
variant="outline"
|
|
className="text-xs font-mono font-bold px-2 py-1 rounded-md bg-white/20 backdrop-blur-sm text-white border border-white/30"
|
|
>
|
|
{t('containersLabel', 'docker')}
|
|
</Badge>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}; |