Cálculo de próximo directo con horario local

link_bio/link_bio/components/link_button.py

@@ -3,7 +3,14 @@
 from link_bio.styles.styles import Size, Color, Spacing
 
 
-def link_button(title: str, body: str, image: str, url: str, is_external=True, highlight_color=None) -> rx.Component:
+def link_button(title: str,
+                body: str,
+                image: str,
+                url: str,
+                is_external=True,
+                highlight_color=None,
+                animated=False) -> rx.Component:
+
     return rx.link(
         rx.button(
             rx.hstack(
@@ -34,6 +41,7 @@ def link_button(title: str, body: str, image: str, url: str, is_external=True, h
                 width="100%"
             ),
             border=f"{'2px' if highlight_color != None else '0px'} solid {highlight_color}",
+            class_name=styles.BOUNCEIN_ANIMATION if animated else None
         ),
         href=url,
         is_external=is_external,

link_bio/link_bio/styles/styles.py

@@ -5,12 +5,15 @@
 
 # Constants
 MAX_WIDTH = "560px"
+FADEIN_ANIMATION = "animate__animated animate__fadeIn"
+BOUNCEIN_ANIMATION = "animate__animated animate__bounceIn"
 
 # Sizes
 
 STYLESHEETS = [
     "https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap",
     "https://fonts.googleapis.com/css2?family=Comfortaa:wght@500&display=swap",
+    "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css",
     "/css/styles.css"
 ]
 

link_bio/link_bio/utils.py

@@ -44,6 +44,31 @@ def lang() -> rx.Component:
 
 LOCAL_TIMEZONE_SCRIPT = "Intl.DateTimeFormat().resolvedOptions().timeZone"
 
+WEEKDAYS = {
+    0: "Lunes",
+    1: "Martes",
+    2: "Miércoles",
+    3: "Jueves",
+    4: "Viernes",
+    5: "Sábado",
+    6: "Domingo"
+}
+
+MONTHS = {
+    1: "Enero",
+    2: "Febrero",
+    3: "Marzo",
+    4: "Abril",
+    5: "Mayo",
+    6: "Junio",
+    7: "Julio",
+    8: "Agosto",
+    9: "Septiembre",
+    10: "Octubre",
+    11: "Noviembre",
+    12: "Diciembre"
+}
+
 
 def next_date(dates: dict, timezone: str) -> str:
 
@@ -75,18 +100,10 @@ def next_date(dates: dict, timezone: str) -> str:
                 next_date.year, next_date.month, next_date.day,
                 time_utc.hour, time_utc.minute, tzinfo=pytz.UTC).astimezone(tz)
 
-            weekdays = {
-                0: "Lunes",
-                1: "Martes",
-                2: "Miércoles",
-                3: "Jueves",
-                4: "Viernes",
-                5: "Sábado",
-                6: "Domingo",
-            }
-
-            day = "Hoy" if weekday == 0 else weekdays[local_date.weekday()]
+            day = "Hoy" if weekday == 0 else WEEKDAYS[local_date.weekday()]
+            zones = timezone.replace('_', ' ').split('/')
 
-            return local_date.strftime(f"{day.capitalize()}, %d/%m a las %H:%M") + f" ({timezone})"
+            return local_date.strftime(
+                f"{day}, %d de {MONTHS[local_date.month]} a las %H:%M | {zones[len(zones) - 1]}")
 
     return ""

link_bio/link_bio/views/header.py

@@ -119,7 +119,8 @@ def header(details=True) -> rx.Component:
                         PageState.live_status.title,
                         "/icons/twitch.svg",
                         const.TWITCH_URL,
-                        highlight_color=Color.PURPLE.value
+                        highlight_color=Color.PURPLE.value,
+                        animated=True
                     ),
                     rx.box(
                         rx.cond(
@@ -129,20 +130,21 @@ def header(details=True) -> rx.Component:
                                 PageState.next_live,
                                 "/icons/twitch.svg",
                                 const.TWITCH_URL,
-                                highlight_color=Color.PURPLE.value
-                            )
+                                highlight_color=Color.PURPLE.value,
+                                animated=True
+                            ),
                         ),
                         width="100%",
                         on_mount=PageState.check_schedule
                     )
                 ),
                 rx.text(
                     f"""
-            Soy ingeniero de software y actualmente trabajo como freelance
-            full-stack developer iOS y Android.
-            Además, creo contenido formativo sobre programación en redes.
-            Aquí podrás encontrar todos mis enlaces de interés ¡Bienvenid@!
-            """,
+                    Soy ingeniero de software y actualmente trabajo como freelance
+                    full-stack developer iOS y Android.
+                    Además, creo contenido formativo sobre programación en redes.
+                    Aquí podrás encontrar todos mis enlaces de interés ¡Bienvenid@!
+                    """,
                     font_size=Size.DEFAULT.value,
                     color=TextColor.BODY.value
                 ),

link_bio/link_bio/views/index_links.py

@@ -1,7 +1,7 @@
 import reflex as rx
 import link_bio.constants as const
+import link_bio.styles.styles as styles
 from link_bio.components.featured_link import featured_link
-from link_bio.model.Featured import Featured
 from link_bio.routes import Route
 from link_bio.components.link_button import link_button
 from link_bio.components.title import title
@@ -39,7 +39,7 @@ def index_links() -> rx.Component:
             const.YOUTUBE_URL
         ),
         link_button(
-            "YouTube [canal secundario]",
+            "YouTube | canal secundario",
             "Emisiones en directo destacadas",
             "/icons/youtube.svg",
             const.YOUTUBE_SECONDARY_URL
@@ -55,7 +55,8 @@ def index_links() -> rx.Component:
                         featured_link
                     ),
                     flex_direction=["column", "row"],
-                    spacing=Spacing.DEFAULT.value
+                    spacing=Spacing.DEFAULT.value,
+                    class_name=styles.FADEIN_ANIMATION
                 ),
                 spacing=Spacing.DEFAULT.value
             )