# Quiz 7 Vuetify Dialog

## Task

In the provided [Random User App](https://stackblitz.com/github/GVSU-CIS371/sample-code/tree/main/Vue.js/Vuetify/RandomUserApp), enhance the functionality by adding a detail view action. This action should trigger a dialog that displays comprehensive information about the user when their identity icon in the data table is clicked. The details to be displayed should include:

- Title of the Card: Display the user's full name.
- Subtitle: Show the user's email address.
- Card Text Content: Present other relevant information of the user. Including a single picture (large size) of the user will suffice.
- Close Action: Incorporate a close (X) icon button within the dialog; clicking this button should close the dialog.

## Expected Display

A sample implementation might resemble the layout and style shown in the reference image below:

```{image} ../assets/img/randomUser.jpg
:width: 500px
:name: User Info Dialog
```

## Reference

- For instructions on creating a card component in Vuetify, consult the [Vuetify Cards documentation](https://vuetifyjs.com/en/components/cards/#basics). This resource provides examples and explanations on how to build and customize card components effectively.
- To access and utilize various icons, including the email and close icon for the dialog, refer to [Material Design Icons](https://pictogrammers.com/library/mdi/). This library offers a wide range of icons suitable for enhancing the user interface of your application.

## Testing

Test your solution in the provided [Random User App](https://stackblitz.com/github/GVSU-CIS371/sample-code/tree/main/Vue.js/Vuetify/RandomUserApp) and verify that the dialog behaves as expected.