⏰ 20 mins

1. In this exercise, I’ve created a UserProfileCard but it currently has no props. Your goal is to give it the needed props based on the following requirements:
   1. avatar - If no avatar URL is provided, the /placeholder-avatar.jpg image should be used
   2. username - is required
   3. name - should be an object with a first and last name property, it should default to the name “John Doe”
   4. skills - an array of the users skills, ensure that they have at least one skill
   5. pro - a boolean indicating whether or not to display the “PRO” badge on the card

<aside> 💡 HINT: the component can be found in /src/components/UserProfileCard.vue (NOT inside of the end directory)

</aside>

1. Define each prop with the appropriate type, default value, and any other necessary validation.
2. In exercise-7-begin.vue, use the UserProfileCard component in the template to display the data for the user defined within the script setup section.
3. By the end of the challenge, you should have something that looks like this:

💪 Bonus

If you finish the exercise early, make the UserProfileCard component always display the skills in alphabetical order no matter what order they are given.

Helpful Resources

1. Vue.js Docs - Component Basics
2. Vue.js Docs - Props