68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
LayoutDashboard,
|
|
HardDrive,
|
|
Layers,
|
|
RotateCcw,
|
|
FileText,
|
|
ShieldCheck,
|
|
Server
|
|
} from 'lucide-react';
|
|
|
|
interface SidebarProps {
|
|
currentTab: string;
|
|
setCurrentTab: (tab: string) => void;
|
|
isWsConnected: boolean;
|
|
}
|
|
|
|
export const Sidebar: React.FC<SidebarProps> = ({ currentTab, setCurrentTab, isWsConnected }) => {
|
|
const menuItems = [
|
|
{ id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
|
|
{ id: 'clients', label: 'Clientes Windows', icon: HardDrive },
|
|
{ id: 'jobs', label: 'Trabajos de Backup', icon: Layers },
|
|
{ id: 'restore', label: 'Explorador & Restore', icon: RotateCcw },
|
|
{ id: 'events', label: 'Auditoría & Logs', icon: FileText },
|
|
];
|
|
|
|
return (
|
|
<aside className="sidebar">
|
|
<div className="brand">
|
|
<div className="brand-icon">
|
|
<ShieldCheck size={24} />
|
|
</div>
|
|
<div className="brand-text">
|
|
<h1>OnEver Drive</h1>
|
|
<span>Proxmox Edition</span>
|
|
</div>
|
|
</div>
|
|
|
|
<nav className="nav-links">
|
|
{menuItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = currentTab === item.id;
|
|
return (
|
|
<button
|
|
key={item.id}
|
|
className={`nav-btn ${isActive ? 'active' : ''}`}
|
|
onClick={() => setCurrentTab(item.id)}
|
|
>
|
|
<Icon size={18} />
|
|
<span>{item.label}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="sidebar-footer">
|
|
<div className="ws-status-badge">
|
|
<div className={`pulse-dot ${isWsConnected ? '' : 'offline'}`} />
|
|
<span>{isWsConnected ? 'Telemetría en Vivo' : 'Reconectando WS...'}</span>
|
|
</div>
|
|
<div style={{ fontSize: '0.72rem', color: 'var(--text-dim)', textAlign: 'center', marginTop: '4px' }}>
|
|
v1.0.0 • Proxmox LXC
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
};
|