68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
import Link from 'next/link';
|
|
import StatusBadge from './StatusBadge';
|
|
import { HardDrive, Cpu, MemoryStick, Info, Terminal } from 'lucide-react';
|
|
|
|
interface VM {
|
|
vmid: string;
|
|
name: string;
|
|
status: string;
|
|
mem: string;
|
|
bootdisk: string;
|
|
}
|
|
|
|
interface VMCardProps {
|
|
vm: VM;
|
|
}
|
|
|
|
export default function VMCard({ vm }: VMCardProps) {
|
|
const hasConsoleAccess = vm.vmid === '100';
|
|
|
|
return (
|
|
<div className="bg-background-card rounded-2xl border border-border p-6 hover:shadow-elevated hover:-translate-y-1 hover:border-foreground/20 transition-all duration-200">
|
|
{/* Header */}
|
|
<div className="flex justify-between items-start mb-4">
|
|
<div>
|
|
<h3 className="text-xl font-bold text-foreground mb-1">{vm.name}</h3>
|
|
<p className="text-sm text-foreground-muted">ID: {vm.vmid}</p>
|
|
</div>
|
|
<StatusBadge status={vm.status} />
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="space-y-3 mb-6">
|
|
<div className="flex items-center gap-3 text-sm">
|
|
<HardDrive className="w-4 h-4 text-foreground-subtle" />
|
|
<span className="text-foreground-muted">Storage</span>
|
|
<span className="ml-auto text-foreground font-medium">{vm.bootdisk} GB</span>
|
|
</div>
|
|
<div className="flex items-center gap-3 text-sm">
|
|
<Cpu className="w-4 h-4 text-foreground-subtle" />
|
|
<span className="text-foreground-muted">Memory</span>
|
|
<span className="ml-auto text-foreground font-medium">{vm.mem} MB</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex gap-2">
|
|
<Link
|
|
href={`/vm/${vm.vmid}`}
|
|
className="flex-1 inline-flex items-center justify-center gap-2 bg-background-card text-foreground hover:bg-background-elevated border border-border px-4 py-2 rounded-xl text-sm font-medium transition-all hover:border-foreground/20"
|
|
>
|
|
<Info className="w-4 h-4" />
|
|
Details
|
|
</Link>
|
|
|
|
{hasConsoleAccess && (
|
|
<Link
|
|
href={`/terminal/${vm.vmid}`}
|
|
className="flex-1 inline-flex items-center justify-center gap-2 bg-foreground text-background hover:bg-foreground/90 px-4 py-2 rounded-xl text-sm font-medium transition-all hover:scale-[1.02]"
|
|
>
|
|
<Terminal className="w-4 h-4" />
|
|
Console
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|