← Назадimport { Bot, Clock, Cpu, HardDrive, RefreshCw, Activity, FolderOpen } from 'lucide-react';
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../ui/card';
import { Button } from '../ui/button';
import { Badge } from '../ui/badge';
import { useProject } from '../../hooks/useProjects';
interface BenderBotCardProps {
onViewDetails: () => void;
onViewTasks: () => void;
onViewFiles?: () => void;
}
export function BenderBotCard({ onViewDetails, onViewTasks, onViewFiles }: BenderBotCardProps) {
const { data, isLoading, refetch } = useProject('bender-bot');
if (isLoading) {
return (
<Card className="animate-pulse">
<div className="h-64 flex items-center justify-center">
<div className="text-gray-400">Loading...</div>
</div>
</Card>
);
}
const { kpis, status } = data || {};
const botStatus = kpis?.bot?.status || status || 'unknown';
const uptime = kpis?.uptime?.formatted || '--';
const memory = kpis?.memory?.formatted || '--';
const cpuPercent = kpis?.cpu?.percent || 0;
const restarts = kpis?.restarts ?? '--';
const statusColor = botStatus === 'running' ? 'border-l-success' : 'border-l-danger';
return (
<Card className={`border-l-4 ${statusColor} transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-primary/10`}>
<CardHeader>
<div className="flex items-start justify-between">
<div className="flex items-center gap-3">
<div className="p-3 rounded-xl bg-primary/20">
<Bot className="w-6 h-6 text-primary" />
</div>
<div>
<CardTitle>Bender Bot</CardTitle>
<CardDescription>Claude Code Telegram · @Bender137_bot</CardDescription>
</div>
</div>
<Badge variant={botStatus === 'running' ? 'success' : 'danger'}>
{botStatus?.toUpperCase()}
</Badge>
</div>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
<div className="bg-white/5 rounded-xl p-4 border border-white/5">
<div className="flex items-center gap-2 text-xs text-gray-400 uppercase mb-2">
<Clock className="w-4 h-4" />
Uptime
</div>
<div className="text-xl font-bold text-white">{uptime}</div>
</div>
<div className="bg-white/5 rounded-xl p-4 border border-white/5">
<div className="flex items-center gap-2 text-xs text-gray-400 uppercase mb-2">
<HardDrive className="w-4 h-4" />
Memory
</div>
<div className="text-xl font-bold text-white">{memory}</div>
</div>
<div className="bg-white/5 rounded-xl p-4 border border-white/5">
<div className="flex items-center gap-2 text-xs text-gray-400 uppercase mb-2">
<Cpu className="w-4 h-4" />
CPU
</div>
<div className="text-xl font-bold text-white">{cpuPercent}%</div>
</div>
<div className="bg-white/5 rounded-xl p-4 border border-white/5">
<div className="flex items-center gap-2 text-xs text-gray-400 uppercase mb-2">
<RefreshCw className="w-4 h-4" />
Restarts
</div>
<div className="text-xl font-bold text-white">{restarts}</div>
</div>
</div>
</CardContent>
<CardFooter className="gap-2">
<Button variant="primary" size="sm" onClick={() => refetch()}>
<Activity className="w-4 h-4" />
Обновить
</Button>
<Button variant="ghost" size="sm" onClick={onViewDetails}>
Детали
</Button>
<Button variant="ghost" size="sm" onClick={onViewTasks}>
Задачи
</Button>
{onViewFiles && (
<Button variant="ghost" size="sm" onClick={onViewFiles}>
<FolderOpen className="w-4 h-4" />
Файлы
</Button>
)}
</CardFooter>
</Card>
);
}