Production Patterns

// Tabs Pattern

const { div, h3, button, p, span } = van.tags;

// Active tab
const activeTab = van.state('overview');

// Tab content
const tabs = {
  overview: {
    label: 'Overview',
    icon: '📊',
    content: 'This is the overview tab with general information and statistics.'
  },
  activity: {
    label: 'Activity',
    icon: '📈',
    count: 12,
    content: 'Recent activity feed showing latest updates and interactions.'
  },
  settings: {
    label: 'Settings',
    icon: '⚙️',
    content: 'Configuration and preferences for your account.'
  }
};

return div(
  { class: 'space-y-4' },

  h3({ class: 'text-lg font-semibold mb-2' }, 'Tabs Navigation'),

  // Tab bar
  div({ class: 'flex gap-2 border-b border-mist' },
    ...Object.entries(tabs).map(([key, tab]) =>
      button({
        onclick: () => activeTab.val = key,
        class: () => activeTab.val === key
          ? 'px-4 py-2 border-b-2 border-sky text-sky font-medium flex items-center gap-2'
          : 'px-4 py-2 text-secondary hover:text-midnight flex items-center gap-2'
      },
        span(tab.icon),
        span(tab.label),
        tab.count ? Badge({ class: 'subtle vwfcolor-error vwfsize-xs' }, tab.count) : ''
      )
    )
  ),

  // Tab content
  Card({ class: 'p-6 bg-white' },
    () => p(tabs[activeTab.val].content)
  )
);