ENG-6166: Gradient profile

demo/demo/demo.py

@@ -5,6 +5,10 @@
 import reflex_ui as ui
 
 
+class State(rx.State):
+    seed: int = 0
+
+
 def index() -> rx.Component:
     # Welcome Page (Index)
     return rx.el.div(
@@ -53,9 +57,19 @@ def index() -> rx.Component:
             on_checked_change=lambda value: rx.toast.success(f"Value: {value}"),
         ),
         ui.slider(
+            value=State.seed,
+            on_value_change=State.set_seed,
             on_value_committed=lambda value: rx.toast.success(f"Value: {value}"),
             class_name="max-w-xs",
         ),
+        rx.el.p(
+            State.seed,
+            class_name="text-secondary-11 text-sm font-medium",
+        ),
+        ui.gradient_profile(
+            seed=State.seed,
+            class_name="size-10",
+        ),
         ui.switch(
             on_checked_change=lambda value: rx.toast.success(f"Value: {value}"),
         ),
@@ -79,7 +93,7 @@ def index() -> rx.Component:
         ),
         ui.theme_switcher(class_name="absolute top-4 right-4"),
         class_name=ui.cn(
-            "flex flex-col gap-4 items-center justify-center h-screen", "bg-secondary-1"
+            "flex flex-col gap-6 items-center justify-center h-screen", "bg-secondary-1"
         ),
     )
 

reflex_ui/__init__.py

@@ -9,6 +9,7 @@
     "components.base.card": ["card"],
     "components.base.checkbox": ["checkbox"],
     "components.base.dialog": ["dialog"],
+    "components.base.gradient_profile": ["gradient_profile"],
     "components.base.popover": ["popover"],
     "components.base.scroll_area": ["scroll_area"],
     "components.base.select": ["select"],

reflex_ui/components/base/gradient_profile.py

@@ -0,0 +1,31 @@
+"""Gradient profile component."""
+
+from reflex.components.component import Component
+from reflex.vars.base import Var
+
+from reflex_ui.components.component import CoreComponent
+
+DEFAULT_CLASS_NAME = "size-4 pointer-events-none rounded-full"
+
+
+class GradientProfile(CoreComponent):
+    """Gradient profile component."""
+
+    library = "@carlosabadia/gradient-profile@github:carlosabadia/gradient-profile"
+
+    tag = "GradientProfile"
+
+    # Seed to generate gradient for
+    seed: Var[str | int]
+
+    # Available colors
+    available_colors: Var[list[str]]
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the gradient profile component."""
+        cls.set_class_name(DEFAULT_CLASS_NAME, props)
+        return super().create(*children, **props)
+
+
+gradient_profile = GradientProfile.create