Fully Responsive Dishes Page

[ShivanshPlays]

Pull Request: Fully Responsive Dishes Page

Overview

This PR introduces a fully responsive Dishes page for the website, featuring an abstracted card component that includes a carousel of images. Additionally, a search bar has been implemented for improved user experience, allowing users to easily filter through Dishes.

Key Features

• Responsive Design: The Dishes page is designed to be fully responsive, providing a seamless experience on both desktop and mobile devices.
• Abstracted Dish Card: A reusable DishCard component has been created, which displays the Dish details and includes a carousel for images.
• Image Carousel: Integrated a carousel using Shadcn components, allowing users to navigate through multiple images of a Dish.
• Search Bar: Added a search bar at the top of the page that allows users to filter Dishes by name, enhancing the usability of the page.
• Add New Dish Button: An "Add New Dish" button positioned in the top right corner for easy access, enabling users to quickly add new Dishes.

Code Changes

• DishesPage.tsx: Implemented the main Dishes page structure, including the search bar and button layout.
• DishCard.tsx: Created a reusable card component for displaying Dish information and images.
• Styling: Utilized Tailwind CSS classes to ensure a consistent and appealing design across the components.

Screenshots

How to Test

1. Navigate to the Dishes page in the application.
2. Test the responsiveness by resizing the browser window.
3. Click on the "Add New Dish" button to verify it navigates to the correct page.
4. Test the image carousel functionality on each Dish card.

Related Issues

• Closes Design and Implement Fully Responsive Dishes Page for Seller #238

[github-actions]

🚀 Thank you for contributing to this project, your support is much appreciated.

Stay awesome! 😎