ritz/examples/tabs/Tabs.py

"""
Tabs component - Beautiful multi-panel tab switching with proper composition.

Demonstrates:
- Component composition (TabMenu, TabPane)
- Match/case for clean panel switching
- Conditional CSS classes for active state
- All logic in WASM, minimal syntax
"""

from ritz.syntax import *


@component
def VerticalTabs():
    """Vertical tabs for settings categories."""
    setting_tab = signal(0)  # 0 = General, 1 = Privacy, 2 = Advanced

    def set_setting(value):
        setting_tab = value

    with Div(class_="vertical-tabs"):
        # Vertical tab menu
        with Div(class_="vertical-tab-menu"):
            if setting_tab == 0:
                with Button(class_="vertical-tab active", onclick=lambda: set_setting(0)):
                    yield "⚙️ General"
            else:
                with Button(class_="vertical-tab", onclick=lambda: set_setting(0)):
                    yield "⚙️ General"

            if setting_tab == 1:
                with Button(class_="vertical-tab active", onclick=lambda: set_setting(1)):
                    yield "🔒 Privacy"
            else:
                with Button(class_="vertical-tab", onclick=lambda: set_setting(1)):
                    yield "🔒 Privacy"

            if setting_tab == 2:
                with Button(class_="vertical-tab active", onclick=lambda: set_setting(2)):
                    yield "🚀 Advanced"
            else:
                with Button(class_="vertical-tab", onclick=lambda: set_setting(2)):
                    yield "🚀 Advanced"

        # Vertical tab content
        with Div(class_="vertical-tab-content"):
            match setting_tab:
                case 0:
                    with Div(class_="setting-pane"):
                        with H3():
                            yield "⚙️ General Settings"
                        with P():
                            yield "Language: English"
                        with P():
                            yield "Time Zone: UTC"

                case 1:
                    with Div(class_="setting-pane"):
                        with H3():
                            yield "🔒 Privacy Settings"
                        with P():
                            yield "Data Collection: Disabled"
                        with P():
                            yield "Analytics: Opt-out"

                case 2:
                    with Div(class_="setting-pane"):
                        with H3():
                            yield "🚀 Advanced Settings"
                        with P():
                            yield "Debug Mode: Off"
                        with P():
                            yield "Experimental Features: Disabled"

                case _:
                    with Div(class_="setting-pane"):
                        with P():
                            yield "Invalid setting"


@component
def Tabs(orientation=0):  # 0 = horizontal, 1 = vertical
    """Main tabs container - orchestrates menu and panes."""
    tab_index = signal(0)  # Track which tab is active: 0 = Home, 1 = Profile, 2 = Settings

    def set_tab(value):
        tab_index = value

    with Div(class_="tabs-container"):
        with H1():
            yield "Tab Component Demo"

        with P(class_="subtitle"):
            yield "Beautiful composition with TabMenu and TabPane components"

        # Tab menu - ul/li structure with active states
        with Ul(class_="tab-menu"):
            if tab_index == 0:
                with Li(class_="tab active"):
                    with Button(onclick=lambda: set_tab(0)):
                        yield "🏠 Home"
            else:
                with Li(class_="tab"):
                    with Button(onclick=lambda: set_tab(0)):
                        yield "🏠 Home"

            if tab_index == 1:
                with Li(class_="tab active"):
                    with Button(onclick=lambda: set_tab(1)):
                        yield "👤 Profile"
            else:
                with Li(class_="tab"):
                    with Button(onclick=lambda: set_tab(1)):
                        yield "👤 Profile"

            if tab_index == 2:
                with Li(class_="tab active"):
                    with Button(onclick=lambda: set_tab(2)):
                        yield "⚙️ Settings"
            else:
                with Li(class_="tab"):
                    with Button(onclick=lambda: set_tab(2)):
                        yield "⚙️ Settings"

        # Tab panes - match/case for clean switching
        with Div(class_="tab-content"):
            match tab_index:
                case 0:
                    # Home pane
                    with Div(class_="tab-pane home"):
                        with H2():
                            yield "🏠 Welcome Home"
                        with P():
                            yield "This is your home dashboard."
                        with P():
                            yield "All your important info at a glance."
                        with Ul():
                            with Li():
                                yield "✓ Recent activity"
                            with Li():
                                yield "✓ Quick actions"
                            with Li():
                                yield "✓ Summary stats"

                case 1:
                    # Profile pane
                    with Div(class_="tab-pane profile"):
                        with H2():
                            yield "👤 Your Profile"
                        with P():
                            yield "Manage your account settings."
                        with Div(class_="profile-info"):
                            with P():
                                yield "Name: Ritz User"
                            with P():
                                yield "Email: user@ritz.dev"
                            with P():
                                yield "Member since: 2025"

                case 2:
                    # Settings pane with NESTED vertical tabs!
                    with Div(class_="tab-pane settings"):
                        with H2():
                            yield "⚙️ Settings"
                        with P():
                            yield "Configure your preferences using the categories below:"

                        # ← NESTED COMPONENT HERE!
                        yield VerticalTabs()

                case _:
                    # Error fallback
                    with Div(class_="tab-pane error"):
                        with P():
                            yield "⚠️ Invalid tab selected"

        # Debug footer
        with Div(class_="debug-footer"):
            with P():
                yield f"Active: {tab_index}"