Feat/hng 44 user dashboard product details component

[gharneeyart]

Description

This PR introduces a product details component to the HNG-boiler-plate-Remix application due to the issue [FEAT] User Dashboard Product Details Component . This component displays detailed information about a selected product, allowing users to view and manage individual product details efficiently.

**Closes #44 **

Changes proposed

What were you told to do?

User Dashboard Product Details Component

Tasks

• Develop the Product Details Component based on the design.
• Implement the header with product name and close button.
• Create an image container for the product photo.
• Add fields for Product ID, Category, Date added, Stock, and Price.
• Implement a section for the product description.
• Add Edit and Delete buttons at the bottom.
• Ensure the component can receive and display data for the selected product.
• Implement the close functionality to dismiss the details view.
• Add appropriate alt text for the product image.
• Optimize the component for responsive design.
• Implement error handling for missing product data.
• Create smooth transitions for opening and closing the details view.
• Ensure text formatting and potential truncation for long descriptions.
• Prepare Edit and Delete functionalities for future implementation if not immediately

What did you do?

Files Added/Modified

app/components/ProductDetails.tsx

app/routes/products.tsx

1. Define ProductDetails Component: Create a React component to display product details, including image, information, and actions (edit/delete).
2. Manage State in ProductsPage: Use state to track the selected product and handlers to update this state when a product is clicked.
3. Conditional Rendering: Render ProductDetails only when a product is selected.
4. Event Handlers: Implement onClose, onEdit, and onDelete to handle user actions for closing, editing, or deleting a product.
5. Static Data Example: Use a static array of products to demonstrate how ProductDetails is displayed based on user interactions.

Figma Link

https://www.figma.com/design/VEItfX6St5NSAqqNHImcxD/HNG-Boilerplate-Designs?node-id=771-9815&t=v7vO8xHyw4fy1OKp-0

Check List (Check all the applicable boxes)

🚨Please review the contribution guideline for this repository.

• My code follows the code style of this project.
• This PR does not contain plagiarized content.
• The title and description of the PR is clear and explains the approach.
• I am making a pull request against the dev branch (left side).
• My commit messages styles matches our requested structure.
• My code additions will fail neither code linting checks nor unit test.
• I am only making changes to files I was requested to.

Screenshots/Videos