From 217b9f36581890f48252f63d7720e7edeea68e89 Mon Sep 17 00:00:00 2001
From: sanjay7178 <saisanjay7660@gmail.com>
Date: Thu, 15 Feb 2024 22:54:43 +0530
Subject: [PATCH] Add VerticalTab component for partition settings

---
 web/frontend/src/Partitions.root.svelte       |  7 +++---
 web/frontend/src/partition/VerticalTab.svelte | 24 +++++++++++++++++++
 2 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 web/frontend/src/partition/VerticalTab.svelte

diff --git a/web/frontend/src/Partitions.root.svelte b/web/frontend/src/Partitions.root.svelte
index 7b2d33b..6da0db2 100644
--- a/web/frontend/src/Partitions.root.svelte
+++ b/web/frontend/src/Partitions.root.svelte
@@ -24,7 +24,8 @@
     import PlotTable from "./PlotTable.svelte";
     import MetricPlot from "./plots/MetricPlot.svelte";
     import { getContext } from "svelte";
-    import PartitionSetting from "./partition/PartitionSetting.svelte";
+    import VerticalTab from "./partition/VerticalTab.svelte";
+
 
     export let cluster;
     export let from = null;
@@ -217,7 +218,7 @@
     <CardBody class="h5">
         <CardSubtitle>Create and manage LVM partitions</CardSubtitle>
         <CardText></CardText>
-        <PartitionSetting />
+        <VerticalTab />
     </CardBody>
 </Card>
-<br />
+<br/>
diff --git a/web/frontend/src/partition/VerticalTab.svelte b/web/frontend/src/partition/VerticalTab.svelte
new file mode 100644
index 0000000..f76eab7
--- /dev/null
+++ b/web/frontend/src/partition/VerticalTab.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { TabContent, TabPane } from 'sveltestrap';
+  </script>
+  
+  <TabContent vertical pills >
+    <TabPane tabId="alpha" tab="Alpha" active>
+      <h2>Alpha</h2>
+      <img
+        alt="Alpha Flight"
+        src="https://upload.wikimedia.org/wikipedia/en/4/49/Alpha_Flight_cast_picture_%28John_Byrne_era%29.gif"
+      />
+    </TabPane>
+    <TabPane tabId="bravo" tab="Bravo">
+      <h2>Bravo</h2>
+      <img
+        alt="Johnny Bravo"
+        src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Johnny_Bravo_series_logo.png/320px-Johnny_Bravo_series_logo.png"
+      />
+    </TabPane>
+    <TabPane tabId="charlie" tab="Charlie">
+      <h2>Charlie</h2>
+      <img alt="Charlie Brown" src="https://upload.wikimedia.org/wikipedia/en/2/22/Charlie_Brown.png" />
+    </TabPane>
+  </TabContent>
\ No newline at end of file