Add docs for Avatar, Icon; Reformat Badge docs

docs/library/datadisplay/avatar.md

@@ -0,0 +1,145 @@
+---
+components:
+    - rx.radix.themes.Avatar
+---
+# Avatar
+
+```python exec
+from reflex.components.radix.themes.components import *
+from reflex.components.radix.themes.layout import *
+from reflex.components.radix.themes.typography import *
+from pcweb.templates.docpage import style_grid
+```
+
+The Avatar component is used to represent a user, and display their profile pictures or fallback texts such as initials.
+
+## Basic Example
+
+To create an avatar component with an image, we pass the image URL as the `src` prop.
+
+```python demo
+avatar(src="/logo.jpg")
+```
+
+If we only want to display a text such as initials, we can set it as the `fallback` prop without passing the `src` prop.
+
+```python demo
+avatar(fallback="RX")
+```
+
+## Styling
+
+```python eval
+style_grid(component_used=avatar, component_used_str="avatar", variants=["solid", "soft"], fallback="RX")
+```
+
+### Size
+
+We use the size prop to control the size of the avatar. The acceptable size is from `"1"` to `"9"`, with `"3"` being the default.
+
+```python demo
+flex(
+    avatar(src="/logo.jpg", fallback="RX", size="1"),
+    avatar(src="/logo.jpg", fallback="RX", size="2"),
+    avatar(src="/logo.jpg", fallback="RX", size="3"),
+    avatar(src="/logo.jpg", fallback="RX"),
+    avatar(src="/logo.jpg", fallback="RX", size="4"),
+    avatar(src="/logo.jpg", fallback="RX", size="5"),
+    avatar(src="/logo.jpg", fallback="RX", size="6"),
+    avatar(src="/logo.jpg", fallback="RX", size="7"),
+    avatar(src="/logo.jpg", fallback="RX", size="8"),
+    gap="1",
+)
+```
+
+### Variant
+
+We use the variant prop to control the visual style of the avatar fallback text. The variant prop can be `"solid"` or `"soft"`. The default is `"soft"`.
+
+```python demo
+flex(
+    avatar(fallback="RX", variant="solid"),
+    avatar(fallback="RX", variant="soft"),
+    avatar(fallback="RX"),
+    gap="2",
+)
+```
+
+### Color Scheme
+
+We use the `color_scheme` prop to assign a specific color to the fallback text, ignoring the global theme.
+
+```python demo
+flex(
+    avatar(fallback="RX", color_scheme="indigo"),
+    avatar(fallback="RX", color_scheme="cyan"),
+    avatar(fallback="RX", color_scheme="orange"),
+    avatar(fallback="RX", color_scheme="crimson"),
+    gap="2",
+)
+```
+
+### High Contrast
+
+We use the `high_contrast` prop to increase color contrast of the fallback text with the background.
+
+```python demo
+grid(
+    avatar(fallback="RX", variant="solid"),
+    avatar(fallback="RX", variant="solid", high_contrast=True),
+    avatar(fallback="RX", variant="soft"),
+    avatar(fallback="RX", variant="soft", high_contrast=True),
+    rows="2",
+    gap="2",
+    flow="column",
+)
+```
+
+### Radius
+
+We use the `radius` prop to assign a specific radius value, ignoring the global theme. It can take values `"none" | "small" | "medium" | "large" | "full"`.
+
+```python demo
+grid(
+    avatar(src="/logo.jpg", fallback="RX", radius="none"),
+    avatar(fallback="RX", radius="none"),
+    avatar(src="/logo.jpg", fallback="RX", radius="small"),
+    avatar(fallback="RX", radius="small"),
+    avatar(src="/logo.jpg", fallback="RX", radius="medium"),
+    avatar(fallback="RX", radius="medium"),
+    avatar(src="/logo.jpg", fallback="RX", radius="large"),
+    avatar(fallback="RX", radius="large"),
+    avatar(src="/logo.jpg", fallback="RX", radius="full"),
+    avatar(fallback="RX", radius="full"),
+    rows="2",
+    gap="2",
+    flow="column",
+)
+```
+
+### Fallback
+
+We use the `fallback` prop to modify the rendered fallback text.
+
+```python demo
+flex(
+    avatar(fallback="RX"),
+    avatar(fallback="PC"),
+    gap="2",
+)
+```
+
+## Final Example
+
+In the following example, we use the Avatar component to build part of a user profile page. The Avatar component is used to display the user's profile picture, and the fallback text is the user's initials. We use the Text components to display the user's full name and username handle. We use the Button component to display the edit profile button.
+
+```python demo
+flex(
+    avatar(src="/logo.jpg", fallback="RU", size="9"),
+    text("Reflex User", weight="bold", size="4"),
+    text("@reflexuser", color_scheme="gray"),
+    button("Edit Profile", color_scheme="indigo", variant="solid"),
+    direction="column",
+    gap="1",
+)
+```

docs/library/datadisplay/badge.md

@@ -2,46 +2,115 @@
 components:
     - rx.radix.themes.Badge
 ---
+# Badge
 
 ```python exec
 from reflex.components.radix.themes.components import *
 from reflex.components.radix.themes.layout import *
 from reflex.components.radix.themes.typography import *
-# from reflex.components.radix.doc_functions import style_grid
+from pcweb.templates.docpage import style_grid
 ```
 
+Badges are used to highlight an item's status for quick recognition.
 
-# Radix badge example docs
+## Basic Example
 
+To create a badge component with only text inside, we pass the text as an argument.
 
-## intro to the component 
+```python demo
+badge("New")
+```
+
+## Styling
+
+```python eval
+style_grid(component_used=badge, component_used_str="badge", variants=["solid", "soft", "surface", "outline"], components_passed="England!",)
+```
 
-A stylized badge element.
+### Size
 
-To create a simple badge component with only text inside we can pass the text that we will render inside the badge as an argument. Here we pass the text `New` to the badge.
+We use the `size` prop to change the size of a badge. It can take values of `"1" | "2"`, with default being `"1"`.
 
 ```python demo
-badge("New")
+flex(
+    badge("New"),
+    badge("New", size="1"),
+    badge("New", size="2"),
+    align="center",
+    gap="2",
+)
 ```
 
-We can also set the `color_scheme` which will change the entire color of the `badge` component.
+### Variant
+
+We use the `variant` prop to control the visual style. The supported variant types are `"solid" | "soft" | "surface" | "outline"`. The variant default is `"soft"`.
 
 ```python demo
-badge("New", color_scheme="orange")
+flex(
+    badge("New", variant="solid"),
+    badge("New", variant="soft"),
+    badge("New"),
+    badge("New", variant="surface"),
+    badge("New", variant="outline"),
+    gap="2",
+)
 ```
 
+### Color Scheme
 
-## examples of using all the props (exclude the style props: color, variant, size, high contrast)
+We use the `color_scheme` prop to assign a specific color, ignoring the global theme.
 
-N/A
+```python demo
+flex(
+    badge("New", color_scheme="indigo"),
+    badge("New", color_scheme="cyan"),
+    badge("New", color_scheme="orange"),
+    badge("New", color_scheme="crimson"),
+    gap="2",
+)
+```
 
-## examples using all the event handlers
+### High Contrast
 
-N/A
+We use the `high_contrast` prop to increase color contrast with the background.
 
-## give in context examples (use radix examples)
+```python demo
+flex(
+    flex(
+        badge("New", variant="solid"),
+        badge("New", variant="soft"),
+        badge("New", variant="surface"),
+        badge("New", variant="outline"),
+        gap="2",
+    ),
+    flex(
+        badge("New", variant="solid", high_contrast=True),
+        badge("New", variant="soft", high_contrast=True),
+        badge("New", variant="surface", high_contrast=True),
+        badge("New", variant="outline", high_contrast=True),
+        gap="2",
+    ),
+    direction="column",
+    gap="2",
+)
+```
 
+### Radius
 
+We use the `radius` prop to assign a specific radius value, ignoring the global theme. It can take values `"none" | "small" | "medium" | "large" | "full"`.
+
+```python demo
+flex(
+    badge("New", radius="none"),
+    badge("New", radius="small"),
+    badge("New", radius="medium"),
+    badge("New", radius="large"),
+    badge("New", radius="full"),
+    gap="3",
+)
+```
+
+## Final Example
 
 Here is a more advanced example of using an icon within the `badge` component. We use the `flex` component to align the icon and the text correctly, using the `gap` prop to ensure that we have the correct spacing.
 
@@ -50,10 +119,7 @@ badge(
     flex(icon(tag="arrow_up"),
         text("8.8%"),
         gap="1",
-    ), 
+    ),
     color="grass",
 )
 ```
-
-
-could maybe add some more in context examples.