Recipe Page

Community feedback

• 

  André Miranda•150

  @codi-AndrePosted 4 days ago

  Good job! It is very close to the design, but you have a lot to improve in your code.

  Try remove the last border from the table, the design will look more clean, something like this:

  
  table tr:not(:first-child) td {
    border-top: solid 1px var(--stone-100);
  }
  
  

  Trust me, little details matter more than people think.

  Despite what people say, do not make everything reusable because you are using a framework that can do that, your components are too complex because of that, it's hard to read and maintain.

  keep it simple, it is just a recipe page, not a recipe book. You can achieve reusability with CSS classes more easily than with react components.

  useState is to make content reactive, props are by default reactive, you are using useState wrong, here one example:

  # pass a default value for list
  
  export function List({ list = [], ...yourProps }) {
  
  # you do not need useState here, list is already reactive
  
      return (
          <>
                              list.map((element, index) =>
                                  <Items key={index} colorSubtitle={colorSubtitle} colorText={colorText} subtitulo={element.subtitulo} descripcion={element.descripcion} />
      );
  }
  
  # there is a lot more to improve, but you will get it with time.
  

  0