Actualmente estoy trabajando en un componente de barra lateral. Esta barra lateral contiene varias tarjetas, como una con entrada y una lista, una con entrada y botones y otra con solo botones. Ahora debería ser lo más modificable posible. Pensé en pasar matrices con los tipos y etiquetas necesarios en una tarjeta al componente de la barra lateral.

Entonces, para una vista como en la primera tarjeta:

Podría ser así:

 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} />

No sé si es mejor estilo hacerlo así y tener dificultades para procesar todas las posibilidades o mejor simplemente enfocarse en estos diseños codificados y dejar que se llenen con datos (hice esto con ~6 tipos de otros elementos de card antes ). ¿O hay una forma completamente diferente de crear elementos personalizables como este?