Section

Section(children: Component): Component;
Section(children: Component[]): Component;
Section(props: { header?: Component; footer?: Component }, children: Component[]): Component;

Section([
    Text("Item 1"),
    Text("Item 2"),
    Text("Item 3")
])

Section({ header: Text("Settings") }, [
    Toggle({ label: "Dark Mode", isOn, setIsOn }),
    Toggle({ label: "Notifications", isOn: notifs, setIsOn: setNotifs })
])

Section(
    {
        header: Text("Account"),
        footer: Text("Your email is used for sign-in.")
    },
    [
        Text("user@example.com"),
        Text("Change password")
    ]
)

List([
    Section({ header: Text("Fruits") }, [
        ForEach(fruits, (fruit) => Text(fruit))
    ]),
    Section({ header: Text("Vegetables") }, [
        ForEach(veggies, (veg) => Text(veg))
    ])
])

ScrollView([
    LazyVStack({ pinnedViews: "sectionHeaders" }, [
        Section({ header: Text("Section A").font("headline") }, [
            ForEach(sectionAItems, (item) => Text(item.name))
        ])
    ])
])