initial

static/components/Tabs.js

@@ -0,0 +1,54 @@
+// Tabs Component
+export class Tabs {
+  constructor(onTabChange) {
+    this.navTabs = document.querySelectorAll('.nav-tab');
+    this.docsTab = document.getElementById('docsTab');
+    this.courseTab = document.getElementById('courseTab');
+    this.onTabChange = onTabChange;
+    this.init();
+  }
+
+  init() {
+    this.navTabs.forEach(tab => {
+      tab.addEventListener('click', () => {
+        const tabName = tab.dataset.tab;
+        this.switchTab(tabName);
+      });
+    });
+  }
+
+  switchTab(tabName) {
+    // Update active tab
+    this.navTabs.forEach(t => t.classList.remove('active'));
+    const activeTab = Array.from(this.navTabs).find(t => t.dataset.tab === tabName);
+    if (activeTab) {
+      activeTab.classList.add('active');
+    }
+    
+    // Show/hide tab content
+    if (tabName === 'docs') {
+      if (this.docsTab) {
+        this.docsTab.style.display = 'flex';
+        this.docsTab.classList.add('active');
+      }
+      if (this.courseTab) {
+        this.courseTab.style.display = 'none';
+        this.courseTab.classList.remove('active');
+      }
+    } else {
+      if (this.docsTab) {
+        this.docsTab.style.display = 'none';
+        this.docsTab.classList.remove('active');
+      }
+      if (this.courseTab) {
+        this.courseTab.style.display = 'flex';
+        this.courseTab.classList.add('active');
+      }
+      
+      if (this.onTabChange) {
+        this.onTabChange(tabName);
+      }
+    }
+  }
+}
+