6 - Building a Custom Reflex Component

Author: codingforentrepreneurs

full_stack_python/full_stack_python.py

@@ -15,11 +15,29 @@ def handle_title_input_change(self, val):
     def did_click(self):
         print("Hello world did click")
 
+def navbar() -> rx.Component:
+    return rx.heading("SaaS", size="9"),
 
-def index() -> rx.Component:
-    # Welcome Page (Index)
+def base_page(child: rx.Component, hide_navbar=False, *args, **kwargs) -> rx.Component:
+    # print([type(x) for x in args])
+    if not isinstance(child,rx. Component):
+        child = rx.heading("this is not a valid child element")
+    if hide_navbar:
+        return rx.container(
+            child,
+            rx.logo(),
+            rx.color_mode.button(position="bottom-left"),
+    )
     return rx.container(
+        navbar(),
+        child,
+        rx.logo(),
         rx.color_mode.button(position="bottom-left"),
+    )
+
+def index() -> rx.Component:
+    # Welcome Page (Index)
+    return base_page(
         rx.vstack(
             rx.heading(State.label, size="9"),
             rx.text(
@@ -42,7 +60,7 @@ def index() -> rx.Component:
             justify="center",
             min_height="85vh",
         ),
-        rx.logo(),
+        hide_navbar=True
     )