entonces este es el componente:
<ReusedHeader H1headerGray="text... " H2headerRed="text2 ! " pheader="p1" getStarted="button text1" hrefab="button url 1" whatWeDo="button text2" hrefbb="button url 2" imageSrc="image url" />;la lista en el componente:
<li className=" hover:ring active:ring-4 w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-red-600 hover:bg-red-700 md:py-4 md:text-lg md:px-10"> {getStarted} </li>Y este componente lo usaré en muchos lugares; en algunos lugares, quiero el componente sin botones;
Simplemente puede pasar los accesorios necesarios y manejar la lógica dentro del componente
const ReusedHeader = ({buttonsEnabled=true}) => { if(buttonsEnabled){ // return something } else { // return something else } }O modifique onClick si desea el mismo marcado sin la funcionalidad onClick.
onClick={buttonsEnabled? onClick : undefined}