Function BlockTabs

preview/src/main.rs:1620–1701

()

#[component]
fn BlockTabs() -> Element {
    let members: &[(&str, &str, &str, &str)] = &[
        ("Avery Lin", "Eng lead", "online", "AL"),
        ("Casey Park", "Design", "away", "CP"),
        ("Robin Hayes", "PM", "offline", "RH"),
    ];
    let activity: &[(&str, &str, &str)] = &[
        ("Casey", "shipped v2.4.1", "12m ago"),
        ("Avery", "opened PR #482", "1h ago"),
        ("Robin", "moved 4 tasks", "3h ago"),
    ];
    rsx! {
        div { style: "display: grid; gap: 0.3rem; margin-bottom: 1.1rem;",
            h3 { style: "margin: 0; font-size: 1rem; font-weight: 660; color: var(--secondary-color-3);", "Workspace" }
            p { style: "margin: 0; color: var(--secondary-color-5); font-size: 0.85rem;", "Team activity at a glance." }
        }
        Tabs {
            default_value: "members".to_string(),
            horizontal: true,
            width: "100%",
            TabList {
                TabTrigger { value: "members".to_string(), index: 0usize, "Members" }
                TabTrigger { value: "activity".to_string(), index: 1usize, "Activity" }
                TabTrigger { value: "files".to_string(), index: 2usize, "Files" }
            }
            TabContent { index: 0usize, value: "members".to_string(),
                div { style: "display: grid; gap: 0.85rem;",
                    for member in members.iter() {
                        div { style: "display: flex; align-items: center; gap: 0.7rem;",
                            ImageAvatar {
                                size: AvatarImageSize::Small,
                                src: "https://avatar.vercel.sh/{member.0}",
                                alt: "{member.0}",
                                aria_label: "{member.0}",
                                "{member.3}"
                            }
                            div { style: "flex: 1; min-width: 0;",
                                div { style: "font-weight: 540; color: var(--secondary-color-3); font-size: 0.9rem;", "{member.0}" }
                                div { style: "color: var(--secondary-color-5); font-size: 0.78rem;", "{member.1}" }
                            }
                            span {
                                style: match member.2 {
                                    "online" => "width: 0.55rem; height: 0.55rem; border-radius: 999px; background-color: rgb(34,197,94);",
                                    "away" => "width: 0.55rem; height: 0.55rem; border-radius: 999px; background-color: rgb(234,179,8);",
                                    _ => "width: 0.55rem; height: 0.55rem; border-radius: 999px; background-color: var(--primary-color-6);",
                                },
                            }
                        }
                    }
                }
            }
            TabContent { index: 1usize, value: "activity".to_string(),
                div { style: "display: grid; gap: 0.85rem;",
                    for entry in activity.iter() {
                        div { style: "display: flex; align-items: baseline; gap: 0.45rem; font-size: 0.88rem;",
                            span { style: "font-weight: 600; color: var(--secondary-color-3);", "{entry.0}" }
                            span { style: "color: var(--secondary-color-5);", "{entry.1}" }
                            span { style: "margin-left: auto; color: var(--secondary-color-5); font-size: 0.78rem; white-space: nowrap;", "{entry.2}" }