36 lines
1.4 KiB
JavaScript
36 lines
1.4 KiB
JavaScript
|
import React, { useState } from "react";
|
||
|
|
|
||
|
|
export default function NetworkMonitor(args) {
|
||
|
|
const [selectedTab, setSelectedTab] = useState("interfaces");
|
||
|
|
const tabs = [
|
||
|
|
{ id: "interfaces", label: "Интерфейсы" },
|
||
|
|
{ id: "topology", label: "Топология сети" },
|
||
|
|
];
|
||
|
|
const handleTabClick = (tabId) => {
|
||
|
|
setSelectedTab(tabId);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className="flex justify-center md:justify-start">
|
||
|
|
{/* Контейнер для вкладок */}
|
||
|
|
<div className="flex p-2 bg-gray-100 dark:bg-gray-900 gap-2 rounded-lg shadow-sm">
|
||
|
|
{tabs.map((tab) => (
|
||
|
|
<button
|
||
|
|
key={tab.id}
|
||
|
|
onClick={() => handleTabClick(tab.id)}
|
||
|
|
className={`rounded-lg px-4 py-2 text-gray-900 dark:text-gray-100 ${selectedTab === tab.id
|
||
|
|
? "bg-gray-200 dark:bg-gray-800 text-orange-600 font-semibold"
|
||
|
|
: "hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-orange-600 duration-300"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{tab.label}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="mt-6">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|