Results Component using Next13

Community feedback

• 

  P

  markus•2,250

  @markuslewinPosted over 1 year ago

  Instead of filtering the data array inside <Summary>, you could iterate over the array in <Home>, like this:

  <h3 className="text-lg text-black pb-4">Summary</h3>;
  {
  data.scores.map((score) => {
  return <Summary key={score.category} {...score} />;
  });
  }
  

  The colors could be stored in an object with the category as a key:

  const colorsByCategory = {
  Reaction: {
  bgColor: "bg-red-100",
  textColor: "text-red-600",
  },
  /* ... */
  };
  

  Or, you could style the items using data modifiers:

  <div
  className="data-[category=Reaction]:bg-red-100 data-[category=Reaction]:text-red-600 ..."
  data-category={category}
  >
  

  Marked as helpful

  1

  ---

  

  Tyler Nichols•180

  @FLuffy-teddyPosted over 1 year ago

  @markuslewin

  Thanks for the response, actually very useful for this next project I am tackling.

  1
• 

  _nehal💎•6,710

  @NehalSahu8055Posted over 1 year ago

  Hello Coder 👋.

  Congratulations on successfully completing the challenge! 🎉

  Few suggestions regarding design.

  ➨ Replace height:100vh with min-height:100vh in container.

  .h-screen {
  min-height: 100vh;
  }
  

  ➨ Give your container some width or more specific max-width as it become very large on larger screens.

  ➨ You can use accessibility features like aria, sr-only, and title which are accessible to screen readers.

  I hope you find this helpful.

  Happy coding😄

  Marked as helpful

  1