E-commerce product page

Community feedback

• 

  Fazza Razaq Amiarso•2,340

  @fazzaamiarsoPosted over 2 years ago

  Hello Carolina! Great work!

  There are some improvements you can make to this code.

   <div onMouseEnter={()=>setHoverContact(true)} onMouseLeave={()=>setHoverContact(false)} className='w-auto cursor-default'>
           <h1 className='relative text-ec-dark-grayishblue font-16 '>Contact</h1>
           <hr className={hoverContact ? 'relative  top-12 border-2 border-ec-orange':'relative border-2 top-12 border-transparent '} />
           </div>
  

  • You don't need to use state and onMouse handler to have the children styled based on parent state. Tailwind have a group class that you can use. Tailwind's docs on group
  • You mustn't have multiple h1 on a page. Why? because h1 means it's the title of the page. You can replace it with other tags such as h2

  Here is the improved version.

   <div className=' group w-auto cursor-default'>
           <h2 className='relative text-ec-dark-grayishblue font-16 '>Contact</h2>
           <hr className= 'relative  top-12 border-2 border-transparent  group-hover:border-ec-orange ' />
           </div>
  

  I hope it helps! Cheers!

  0