feat: product details implementation

[evgongora]

Description

Closes #32

This PR introduces the ProductDetails component to display detailed information about products.

Key implementations include:

ProductDetails Component (ProductDetails.tsx):

Display Features: Shows product image, name, description, roast level, process method, price, and availability. Uses DataCard components to present attributes like roast level, process, bags available, and unit price. Uses a ProducerInfo component that displays producer's farm information, including farm name, rating, sales count, altitude, and coordinates. Uses a FarmModal component to showcase farm specific information. Uses a SelectionTypeCard Component that: Allows users to select coffee type (bean or grounded) and adjust quantity. Displays unit price and calculates total price based on quantity. Includes increment and decrement buttons for quantity selection. "Add to Cart" button to add the selected quantity to the cart.

Conditional Rendering: Adjusts the UI based on product type ("Buyer", "Farmer", or "SoldOut"). Displays "Sold Out" status when applicable.

Product API Endpoint (route.ts):

Adds a new API route at /api/product/[id] to fetch product data. Retrieves product details from mockedProducts based on the provided ID. Returns a JSON response with product data or a 404 error if not found.

Product Page (page.tsx):

Fetches the product ID from URL parameters. Calls the new API endpoint to retrieve product data. Manages loading and error states with appropriate user feedback. Renders the ProductDetails component with the fetched product data.

Checklist

• [X] The title of the PR is clear and descriptive.
• [X] All tests have been run and passed.
• [X] Code follows project conventions (Biome formatting, linting).
• [ ] Documentation has been updated as needed.
• [X] Commit messages follow the Conventional Commits style.

Type of Change

• [ ] Bugfix
• [X] Feature
• [ ] Refactor
• [ ] Chore
• [ ] Documentation
• [ ] Test

Additional Notes

Check this video for the preview: https://www.loom.com/share/22336caaaac94343a0699028aa3bcac6?sid=c93594da-51a0-4507-83b2-09c8a39a6af5

[vercel[bot]]

@evgongora is attempting to deploy a commit to the CofiBlocks Team on Vercel.

A member of the Team first needs to authorize it.