I'm currently working on a sidebar component. This sidebar contains multiple cards, like one with input and a list, one with input and buttons and one with only buttons. Now it should be as modifiable as possible. I thought of passing arrays with the needed types and labels in a card to the sidebar component.

So for a view like in the first card:

It could be like this:

    const data=[
        {
            label:"Systems",
            type: "heading"
        },
        {
            label:"",
            type: "input",
            onChange: "search"
        },
        {
            label: "",
            type: "ul",
            elements: [
                "Item#1",
                "Item#2",
                "Item#3",
                "Item#4",
            ]
        }
    ]

    <Sidebar card={data} />

I don't know if it's better style to do it like this and have a hard time processing all possibilites or better just focus on these hardcoded layouts and let them fill with data (i did this with ~6 types of other card-elements before). Or is there a completely other way to create customizable elements like this?