Need to display "Empty Cart" when cart is empty on cart page

[sbmsr]

Description

When a user clicks the cart icon, they see alot of blank whitespace. Our designers want us to show some content to fill this blank space. We need to complete this using flexbox, since it is our team's preferred method of CSS alignment.

Notes from Design Team

Mockup

• Icon

  • Use the shoppingCartIcon from heroicons library (currently installed in the project)
  • Limit Width of icon to 3rem (48px)

• Text

  • The text must say "Your Cart is Empty."
  • Have a padding on top of text of .5 rem (8px)

Resources

• Flexbox
• Tailwind Documentation
• Heroicons

Deliverables

• [ ] implement mockup on cart page (when cart is empty) using flexbox