From 810d43e497dc8914e27eef053f237f3db9e79b9c Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Thu, 15 Jan 2026 13:52:47 -0500
Subject: [PATCH] add styled tab view

---
 components/TabView/StyledTab.qml     |  7 +++
 components/TabView/StyledTabView.qml | 65 ++++++++++++++++++++++++++++
 modules/storybook/Navigation.qml     | 26 +++++++++++
 modules/storybook/Storybook.qml      |  9 ++++
 4 files changed, 107 insertions(+)
 create mode 100644 components/TabView/StyledTab.qml
 create mode 100644 components/TabView/StyledTabView.qml
 create mode 100644 modules/storybook/Navigation.qml

diff --git a/components/TabView/StyledTab.qml b/components/TabView/StyledTab.qml
new file mode 100644
index 0000000..93e16a8
--- /dev/null
+++ b/components/TabView/StyledTab.qml
@@ -0,0 +1,7 @@
+import QtQuick
+
+Item {
+    property string title
+    property string icon
+    default property Component content
+}
diff --git a/components/TabView/StyledTabView.qml b/components/TabView/StyledTabView.qml
new file mode 100644
index 0000000..b90660e
--- /dev/null
+++ b/components/TabView/StyledTabView.qml
@@ -0,0 +1,65 @@
+pragma ComponentBehavior: Bound
+
+import qs.components
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    id: root
+
+    default property list<StyledTab> tabs
+
+    anchors.fill: parent
+
+    Container {
+        id: tabs
+
+        anchors.top: parent.top
+        anchors.left: parent.left
+
+        implicitHeight: 30
+
+        anchors.bottom: view.top
+        anchors.right: parent.right
+
+        contentItem: ListView {
+            model: tabs.contentModel
+            snapMode: ListView.SnapOneItem
+            orientation: ListView.Horizontal
+        }
+
+        Repeater {
+            model: root.tabs
+            delegate: StyledButton {
+                required property var modelData
+                required property var index
+
+                text: modelData.title
+                onClicked: tabs.setCurrentIndex(index)
+            }
+        }
+    }
+
+    SwipeView {
+        id: view
+
+        orientation: Qt.Horizontal
+
+        currentIndex: tabs.currentIndex
+
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+
+        anchors.top: tabs.bottom
+        anchors.left: parent.left
+
+        Repeater {
+            model: root.tabs
+            Loader {
+                required property var modelData
+                active: SwipeView.isCurrentItem || SwipeView.isNextItem || SwipeView.isPreviousItem
+                sourceComponent: modelData.content
+            }
+        }
+    }
+}
diff --git a/modules/storybook/Navigation.qml b/modules/storybook/Navigation.qml
new file mode 100644
index 0000000..e057e82
--- /dev/null
+++ b/modules/storybook/Navigation.qml
@@ -0,0 +1,26 @@
+import qs.components
+import qs.components.TabView
+import qs.config
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    anchors.fill: parent
+
+    StyledTabView {
+        StyledTab {
+            title: 'Red Tab'
+            Rectangle {
+                color: 'red'
+                anchors.fill: parent
+            }
+        }
+        StyledTab {
+            title: 'Blue Tab'
+            Rectangle {
+                color: 'blue'
+                anchors.fill: parent
+            }
+        }
+    }
+}
diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml
index 8a1a9b9..a9a685f 100644
--- a/modules/storybook/Storybook.qml
+++ b/modules/storybook/Storybook.qml
@@ -40,6 +40,11 @@ StyledPanelWindow {
             text: "Components"
             onClicked: tabs.setCurrentIndex(2)
         }
+
+        StyledTabButton {
+            text: "Navigation"
+            onClicked: tabs.setCurrentIndex(3)
+        }
     }
 
     SwipeView {
@@ -69,5 +74,9 @@ StyledPanelWindow {
             padding: 36
             Components {}
         }
+        ScrollView {
+            padding: 36
+            Navigation {}
+        }
     }
 }