Styled App Bar - Copy this React, Mui Component to your project
Prompt: Create a "Confirm your selections" page using Material UI. The page should have the following sections: Header Section: A navigation header with a "New import" button on the left and a "Help" button. The header should have a clean, modern style. Main Content Section: A title that says "Confirm your selections" prominently. Three main steps, styled vertically, with numbered labels: a. Step 1: Select a source A card or container showing "Production database" with an icon. Add an arrow icon (chevron) on the right to indicate navigation. b. Step 2: Review import details A summary showing the number of selected tables (e.g., "3 of 3 selected") and rows ("3 rows"). c. Step 3: Confirm selections A list of tables/views and stored procedures in a vertical layout. Each item includes: An icon representing the type (e.g., table or procedure). A title (e.g., "people", "orders", "order_items"). A row count displayed as metadata (e.g., "3 rows"). Display tables/views and stored procedures as separate grouped lists. Action Button: A prominent "Start import" button centered at the bottom of the page, styled with a primary color. Additional Requirements: Use Material UI components like AppBar, Card, Typography, List, ListItem, and Button. Maintain a responsive design suitable for both desktop and mobile views. Apply proper spacing and padding using Material UI's Grid and Box components to ensure visual hierarchy.
