WIP: Implement frontend

assets/controllers/tabs_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+
+    static classes = [ 'buttonActive' ]
+
+    static targets = [ 'button', 'tab' ]
+
+    static values = { activeTab: Number }
+
+    select({ params: { tab } }) {
+        let selectedTab = tab
+        this.activeTabValue = selectedTab
+        this.element.dispatchEvent(new CustomEvent('select', {
+            detail: {
+                tab: selectedTab
+            }
+        }))
+    }
+
+    activeTabValueChanged(activeTab) {
+        this.tabTargets.forEach((element, index) => {
+            element.classList.toggle('hidden', activeTab !== index)
+        })
+
+        this.buttonTargets.forEach((element, index) => {
+            if (this.hasButtonActiveClass) {
+                element.classList.toggle(this.buttonActiveClass, activeTab === index)
+            }
+        })
+    }
+}