recentOrders

Overview

The Container component is a React functional component that fetches and displays menu items based on provided main and side list IDs, as well as a size type associated with a container. It allows users to view the details of their selected items and provides functionality to reorder these items by adding them back to the cart.

Key Features

• Data Fetching with tRPC:
  Retrieves main and side menu items, as well as size type information, using tRPC hooks based on the provided IDs.

• Dynamic Rendering:
  Displays the size type name and dynamically lists the main and side menu items.

• Reorder Functionality:
  Includes a "Reorder" button that enables users to add the current combo back to their cart with visual feedback during the process.

• State Management:
  Utilizes React's useState hook to manage the reordering state, preventing multiple submissions and providing user feedback.

• Conditional Styling with Tailwind CSS:
  Applies Tailwind CSS classes to ensure a responsive and visually appealing layout.

• Type Safety with TypeScript:
  Ensures all props and data structures adhere to defined TypeScript types, reducing the likelihood of runtime errors.

Usage

<Container
  mainList={[1, 2, 3]}
  sideList={[4, 5]}
  sizeId={10}
  addComboToCart={addComboToCart}
/>