TNV
Thành Nguyễn Văn

Styled App Bar - Copy this React, Mui Component to your project

Create a User List Page UI for an Admin Dashboard with a professional, modern design. The page should be clean, easy to navigate, and mobile friendly. Key Features: Header: Includes a title: "Admin Dashboard". Displays a responsive navigation menu with items: User, Task, and Logout. On larger screens, the menu is displayed inline. On mobile, a hamburger menu (using CgMenu icon) opens a drawer containing the navigation links. User: Redirects to the User List Page. Task: Redirects to a Task Management Page. Logout: Signs the user out of the dashboard. User Table: Displays user data in columns: Name, Email, Role, Status, and Actions. Sortable Columns for Name and Email. Action Buttons for each row: Edit Button (FiEdit): Opens an Edit User Popup to modify user details. Delete Button (FiTrash2): Opens a Delete Confirmation Popup before proceeding with deletion. Pagination at the bottom, allowing admins to navigate between user pages, choose items per page (10, 25, 50), and view the total number of users. Create User Button: A prominent button labeled Create User at the top right corner. Clicking this opens a Create User Popup where the admin can input details like Name, Email, Password, and Role. Popup Designs: Edit User Popup: A modal form allowing the admin to edit user details. Fields: Name, Email, Password, Role (dropdown for Admin/User). Buttons: Save Changes and Cancel. Delete Confirmation Popup: Text: "Are you sure you want to delete [user's name]? This action cannot be undone." Buttons: Delete and Cancel. Create User Popup: Modal form for adding a new user. Fields: Name, Email, Password, Role. Buttons: Create User and Cancel. Footer: A sticky footer at the bottom of the page containing: Admin Dashboard branding or text. Navigation Links for User, Task, and Logout, similar to the header for quick access. Current Year dynamically displayed. Menu and Navigation: Sidebar Menu for larger screens and Hamburger Menu for mobile: User: Links to the User List page. Task: Links to the Task Management page. Logout: Logs the user out of the dashboard. Menu items use icons like FiUsers (User), FiClipboard (Task), and FiLogOut (Logout). Layout & Responsiveness: Header and Footer are sticky, ensuring the navigation is always visible. Responsive design adapts to mobile devices with collapsible menus and mobile friendly cards replacing the table view for smaller screens. Professional use of MUI components like AppBar, Drawer, Table, TableBody, TableCell, TableRow, Dialog, Button, IconButton, and Chip. React Icons are used for all action icons (FiEdit, FiTrash2, CgMenu, FiHome, FiUsers, FiClipboard, FiLogOut).

Prompt
Component Preview

About

StyledAppBar - Features a responsive header with navigation links, sticky footer, and mobile-friendly design, built with react and mui. Get code instantly!

Share

Last updated 1 month ago