refactor(k8s): namespace core logic (#12142)

Co-authored-by: testA113 <aliharriss1995@gmail.com>
Co-authored-by: Anthony Lapenna <anthony.lapenna@portainer.io>
Co-authored-by: James Carppe <85850129+jamescarppe@users.noreply.github.com>
Co-authored-by: Ali <83188384+testA113@users.noreply.github.com>

app/react/kubernetes/volumes/ListView/VolumesView.tsx

@@ -0,0 +1,40 @@
+import { useCurrentStateAndParams } from '@uirouter/react';
+import { Database, HardDrive } from 'lucide-react';
+
+import { PageHeader } from '@@/PageHeader';
+import { WidgetTabs, Tab, findSelectedTabIndex } from '@@/Widget/WidgetTabs';
+
+import { VolumesDatatable } from './VolumesDatatable';
+import { StorageDatatable } from './StorageDatatable';
+
+export function VolumesView() {
+  const tabs: Tab[] = [
+    {
+      name: 'Volumes',
+      icon: Database,
+      widget: <VolumesDatatable />,
+      selectedTabParam: 'volumes',
+    },
+    {
+      name: 'Storage',
+      icon: HardDrive,
+      widget: <StorageDatatable />,
+      selectedTabParam: 'storage',
+    },
+  ];
+
+  const currentTabIndex = findSelectedTabIndex(
+    useCurrentStateAndParams(),
+    tabs
+  );
+
+  return (
+    <>
+      <PageHeader title="Volume list" breadcrumbs="Volumes" reload />
+      <>
+        <WidgetTabs tabs={tabs} currentTabIndex={currentTabIndex} />
+        <div className="content">{tabs[currentTabIndex].widget}</div>
+      </>
+    </>
+  );
+}