User role dialog - v0 by Vercel

Now I have a good understanding of the available components. Let me create the User Roles Dialog component and a page to showcase it.

I've created a complete User Roles Management Dialog with the following features:

Role Management Dialog (components/user-roles-dialog.tsx):
- Displays user info (avatar, name, email)
- Shows current roles with visual indicators and descriptions
- Add roles using a dropdown select with available roles
- Remove roles with the X button on each role card
- Set primary role by clicking the star icon (only visible on non-primary roles)
- Primary role is automatically highlighted with a badge and accent styling
- Empty state when no roles are assigned
Demo Page (app/page.tsx):
- Shows a list of team members with their current roles
- Displays primary role as a colored badge
- Additional roles shown as smaller outline badges
- Each user has a "Manage" button that opens the dialog

The dialog supports 5 role types (Admin, Editor, Viewer, Moderator, Developer), each with an icon and description. Changes are tracked locally and saved when clicking "Save Changes".

Now I have a good understanding of the available components. Let me create the User Roles Dialog component and a page to showcase it.

I've created a complete User Roles Management Dialog with the following features:

Role Management Dialog (components/user-roles-dialog.tsx):
- Displays user info (avatar, name, email)
- Shows current roles with visual indicators and descriptions
- Add roles using a dropdown select with available roles
- Remove roles with the X button on each role card
- Set primary role by clicking the star icon (only visible on non-primary roles)
- Primary role is automatically highlighted with a badge and accent styling
- Empty state when no roles are assigned
Demo Page (app/page.tsx):
- Shows a list of team members with their current roles
- Displays primary role as a colored badge
- Additional roles shown as smaller outline badges
- Each user has a "Manage" button that opens the dialog

The dialog supports 5 role types (Admin, Editor, Viewer, Moderator, Developer), each with an icon and description. Changes are tracked locally and saved when clicking "Save Changes".