Use new TabWidget for VM route

virtweb_frontend/src/widgets/vms/VMDetails.tsx

@@ -20,6 +20,7 @@ import { useNavigate } from "react-router-dom";
 import { useAlert } from "../../hooks/providers/AlertDialogProvider";
 import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
 import { useSnackbar } from "../../hooks/providers/SnackbarProvider";
+import { TabsWidget } from "../TabsWidget";
 
 interface DetailsProps {
   vm: VMInfo;
@@ -82,20 +83,21 @@ function VMDetailsInner(p: DetailsInnerProps): React.ReactElement {
 
   return (
     <>
-      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-        <Tabs value={currTab} onChange={(_ev, newVal) => setCurrTab(newVal)}>
-          <Tab label="General" tabIndex={VMTab.General} />
-          <Tab label="Storage" tabIndex={VMTab.Storage} />
-          <Tab label="Network" tabIndex={VMTab.Network} />
-          {!p.editable && (
-            <Tab
-              label="Danger zone"
-              style={{ color: "red" }}
-              tabIndex={VMTab.Danger}
-            />
-          )}
-        </Tabs>
-      </Box>
+      <TabsWidget
+        currTab={currTab}
+        onTabChange={setCurrTab}
+        options={[
+          { label: "General", value: VMTab.General, visible: true },
+          { label: "Storage", value: VMTab.Storage, visible: true },
+          { label: "Network", value: VMTab.Network, visible: true },
+          {
+            label: "Danger zone",
+            value: VMTab.Danger,
+            visible: !p.editable,
+            color: "red",
+          },
+        ]}
+      />
 
       {currTab === VMTab.General && <VMDetailsTabGeneral {...p} />}
       {currTab === VMTab.Storage && <VMDetailsTabStorage {...p} />}