Tabs

use hydroxy_leptos::tabs::*;
use leptos::prelude::*;

pub fn demo() -> AnyView {
    let (value, set_value) = signal(Some("overview".to_string()));

    view! {
        // Controlled, horizontal, automatic activation.
        <Tabs
            tabs=vec![
                TabsItem::new("overview"),
                TabsItem::new("sources"),
                TabsItem::new("archived").disabled(),
                TabsItem::new("activity"),
            ]
            value=value
            on_value_change=move |v| set_value.set(Some(v))
        >
            <TabsList>
                <TabsTrigger value="overview">"Overview"</TabsTrigger>
                <TabsTrigger value="sources">"Sources"</TabsTrigger>
                <TabsTrigger value="archived">"Archived"</TabsTrigger>
                <TabsTrigger value="activity">"Activity"</TabsTrigger>
            </TabsList>
            <TabsContent value="overview">"Nine of twelve interviewees raised onboarding."</TabsContent>
            <TabsContent value="sources">"interviews-q3.pdf, tickets-sept.csv"</TabsContent>
            <TabsContent value="archived">"Nothing archived."</TabsContent>
            <TabsContent value="activity">"Summary drafted 26 October."</TabsContent>
        </Tabs>

        // Uncontrolled, vertical, manual activation: arrows move focus, Enter selects.
        <Tabs
            tabs=vec![TabsItem::new("general"), TabsItem::new("members"), TabsItem::new("billing")]
            default_value="general"
            orientation=Orientation::Vertical
            activation=Activation::Manual
        >
            <div style="display: flex; gap: var(--space-8);">
                <TabsList>
                    <TabsTrigger value="general">"General"</TabsTrigger>
                    <TabsTrigger value="members">"Members"</TabsTrigger>
                    <TabsTrigger value="billing">"Billing"</TabsTrigger>
                </TabsList>
                <TabsContent value="general">"Workspace name and default theme."</TabsContent>
                <TabsContent value="members">"22 of 24 seats in use."</TabsContent>
                <TabsContent value="billing">"Next invoice 1 November."</TabsContent>
            </div>
        </Tabs>
    }
    .into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::tabs::{Tabs, TabsContent, TabsItem, TabsList, TabsTrigger};

#[component]
pub fn TabsDemo() -> Element {
    let mut value = use_signal(|| Some("overview".to_string()));
    let tabs = vec![
        TabsItem::new("overview"),
        TabsItem::new("sources"),
        TabsItem::new("archived").disabled(),
        TabsItem::new("activity"),
    ];

    rsx! {
        p { "Selected: {value().unwrap_or_default()}" }
        Tabs {
            tabs,
            value: value(),
            on_value_change: move |v| value.set(Some(v)),
            TabsList {
                TabsTrigger { value: "overview", "Overview" }
                TabsTrigger { value: "sources", "Sources" }
                TabsTrigger { value: "archived", "Archived" }
                TabsTrigger { value: "activity", "Activity" }
            }
            TabsContent { value: "overview", "Nine of twelve interviewees raised onboarding." }
            TabsContent { value: "sources", "interviews-q3.pdf, tickets-sept.csv" }
            TabsContent { value: "archived", "Nothing archived." }
            TabsContent { value: "activity", "Summary drafted 26 October." }
        }
    }
}