Implement Product Details UI Components

[brolag]

Task: Product Detail View Implementation

Description:

Create a product detail view with three variations:

1. Buyer View:

   • Display options for selecting coffee type (Bean or Grounded).
   • Quantity input field for selecting the number of bags.
   • Show the "Add to cart" button.
   • Display product status, including roast level, bags available, and unit price.

2. Farmer View:

   • Remove cart functionality.
   • Display an "Edit my farm" button instead of "Add to cart".
   • Show roast level, bags available, and unit price, but provide the option to edit farm details.

3. Sold Out View:

   • Remove the cart and quantity input.
   • Display "Sold out" in both the product availability section and in the unit price section.

Acceptance Criteria:

• Implement dynamic rendering based on the view type (Buyer, Farmer, or Sold Out).
• Ensure components are reusable and styled using TailwindCSS.
• Pass product data (name, roast level, bags available, producer info) through props to support different states.
• Ensure responsiveness for mobile and tablet devices.
• Implement accessibility labels for all form elements and buttons.
• Test the components with real product data to verify proper functionality and visual integrity across the different views.

[evgongora]

Hello @brolag!

I would like to work on this :)

[brolag]

Go ahead @evgongora !