feat(docs): update avatar xplat topic

[IMinchev64]

Closes #449

Related sample PR (Angular): IgniteUI/igniteui-angular-samples#4009
Related sample PR (React): IgniteUI/igniteui-react-examples#1092
Related sample PR (WC): IgniteUI/igniteui-wc-examples#1237
Related sample PR (Blazor): IgniteUI/igniteui-blazor-examples#1292

Checklist:

• check topic's TOC/menu and paragraph headings
• Include TOC topic labels in the topic content when it has a valuable update, is new, or is considered preview / beta
• link to other topics using ./page.mdx or ../relative/path.mdx (.mdx extension required)
• at the References section at the end of the topic add links to topics, samples, etc
• reference API documentation instead of adding a section with API

• use valid component names - [Data] Grid, IgxSelectComponent, <igx-combo>
• use spell checker tool (VS Code, Grammarly, Microsoft Editor)
• add inline code blocks for the names of classes / tags / properties
• add language descriptor for the code blocks
• check if links function by running the check-api/mdx npm commands
• check if sample is working and fully visible in the topic
• check if sample is working and fully visible in the StackBlitz
• check if code blocks match the code in StackBlitz demo
• add or update meaningful llms.description metadata and run npm run check:llms-metadata

• follow SEO guidelines to fill topic's metadata (SEO guidelines)

• do not resolve requested changes (leave that to the reviewer)

[DiLazarova]

Avatar Component

!I had trouble accessing the Angular platform from the branch!

Webcomponents = Blazor = React

The Avatar Component Structure should be by design as follows:

1. Live Demo Section is missing.

2. USAGE section

• “Variants” subsection is missing
• “Content” subsection need to be replaced with Variants.
• Additional subsection has been added - “Basic Declaration “

Same is relevant for Blazor and React

.

Link to Design Documentation: https://www.infragistics.com/products/indigo-design/help/components/avatar

[DiLazarova]

Avatar

Webcomponents = Blazor = React

• Anatomy Section

1. The text (1,2,3...)describing the layout of the elements within the component's structure is missing. It can be taken from the design file: Figma Design File

Please use the same text and color styles!

2. The image of the structure must be placed within the component's frame so that the proportions are correct

[ChronosSF]

@IMinchev64 , can you check the blazor samples + topics when the astro comps version is 30 (might be some regression in the samples component but let me know either way).

I updated your branch with the new badge topic that's now in vnext which comes with v 30, so we gotta make it work.