Botón con navegación

mouredev · Mar 5, 2024 · a46b905 · a46b905
1 parent b788115
commit a46b905
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # Python Web
 
 [![Python](https://img.shields.io/badge/Python-3.11+-yellow?style=for-the-badge&logo=python&logoColor=white&labelColor=101010)](https://python.org)
-[![Reflex](https://img.shields.io/badge/Reflex-0.4.1+-5646ED?style=for-the-badge&logo=reflex&logoColor=white&labelColor=101010)](https://reflex.dev)
+[![Reflex](https://img.shields.io/badge/Reflex-0.4.3+-5646ED?style=for-the-badge&logo=reflex&logoColor=white&labelColor=101010)](https://reflex.dev)
 
 ## Curso de 6 horas en vídeo para aprender desarrollo web frontend con Python puro y Reflex desde cero.
 

diff --git a/link_bio/README.md b/link_bio/README.md
@@ -1,7 +1,7 @@
 # Web de links de MoureDev
 
 [![Python](https://img.shields.io/badge/Python-3.11+-yellow?style=for-the-badge&logo=python&logoColor=white&labelColor=101010)](https://python.org)
-[![FastAPI](https://img.shields.io/badge/Reflex-0.4.1+-5646ED?style=for-the-badge&logo=reflex&logoColor=white&labelColor=101010)](https://fastapi.tiangolo.com)
+[![FastAPI](https://img.shields.io/badge/Reflex-0.4.3+-5646ED?style=for-the-badge&logo=reflex&logoColor=white&labelColor=101010)](https://fastapi.tiangolo.com)
 
 ## Proyecto desarrollado con [Python](https://www.python.org/) y [Reflex](https://reflex.dev/) que representa un sitio web personal estilo "[link in bio](https://moure.dev/)"
 

diff --git a/link_bio/link_bio/components/link_button.py b/link_bio/link_bio/components/link_button.py
@@ -1,6 +1,6 @@
 import reflex as rx
 import link_bio.styles.styles as styles
-from link_bio.styles.styles import Size, Color, Spacing
+from link_bio.styles.styles import Size, Spacing
 
 
 def link_button(title: str,
@@ -11,39 +11,35 @@ def link_button(title: str,
                 highlight_color=None,
                 animated=False) -> rx.Component:
 
-    return rx.link(
-        rx.button(
-            rx.hstack(
-                rx.image(
-                    src=image,
-                    width=Size.LARGE.value,
-                    height=Size.LARGE.value,
-                    margin=Size.MEDIUM.value,
-                    alt=title
+    return rx.button(
+        rx.hstack(
+            rx.image(
+                src=image,
+                width=Size.LARGE.value,
+                height=Size.LARGE.value,
+                margin=Size.MEDIUM.value,
+                alt=title
+            ),
+            rx.vstack(
+                rx.text(
+                    title,
+                    size=Spacing.SMALL.value,
+                    style=styles.button_title_style
                 ),
-                rx.vstack(
-                    rx.text(
-                        title,
-                        size=Spacing.SMALL.value,
-                        style=styles.button_title_style
-                    ),
-                    rx.text(
-                        body,
-                        size=Spacing.VERY_SMALL.value,
-                        style=styles.button_body_style
-                    ),
-                    align_items="start",
-                    spacing=Spacing.VERY_SMALL.value,
-                    padding_y=Size.SMALL.value,
-                    padding_right=Size.SMALL.value
+                rx.text(
+                    body,
+                    size=Spacing.VERY_SMALL.value,
+                    style=styles.button_body_style
                 ),
-                align="center",
-                width="100%"
+                align_items="start",
+                spacing=Spacing.VERY_SMALL.value,
+                padding_y=Size.SMALL.value,
+                padding_right=Size.SMALL.value
             ),
-            border=f"{'2px' if highlight_color != None else '0px'} solid {highlight_color}",
-            class_name=styles.BOUNCEIN_ANIMATION if animated else None
+            align="center",
+            width="100%"
         ),
-        href=url,
-        is_external=is_external,
-        width="100%"
+        border=f"{'2px' if highlight_color != None else '0px'} solid {highlight_color}",
+        class_name=styles.BOUNCEIN_ANIMATION if animated else None,
+        on_click=rx.redirect(path=url, external=is_external)
     )
diff --git a/link_bio/link_bio/styles/styles.py b/link_bio/link_bio/styles/styles.py
@@ -59,6 +59,7 @@ class Spacing(Enum):
         "background_color": Color.CONTENT.value,
         "white_space": "normal",
         "text_align": "start",
+        "--cursor-button": "pointer",
         "_hover": {
             "background_color": Color.SECONDARY.value
         }

diff --git a/link_bio/requirements.txt b/link_bio/requirements.txt
@@ -1,5 +1,5 @@
 pip==24.0
-reflex==0.4.1
+reflex==0.4.3
 python-dotenv==1.0.1
 supabase==2.3.5
 configcat-client==9.0.2