add logo and template

reflex-dev · Apr 4, 2024 · 69b3f1b · 69b3f1b
2 parents 256f61e + 49d2b03
commit 69b3f1b
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 51 deletions.
diff --git a/dashboard/graphs.py b/dashboard/graphs.py
@@ -20,7 +20,9 @@ def stat_card(title: str, stat, delta) -> rx.Component:
                 rx.chakra.stat(
                     rx.hstack(
                         rx.chakra.stat_number(stat, color=color),
-                        rx.chakra.stat_help_text(rx.chakra.stat_arrow(type_=arrow), delta[1:]),
+                        rx.chakra.stat_help_text(
+                            rx.chakra.stat_arrow(type_=arrow), delta[1:]
+                        ),
                     ),
                 ),
             ),

diff --git a/dashboard/navigation.py b/dashboard/navigation.py
@@ -5,22 +5,20 @@
 
 
 def sidebar_link(text: str, href: str, icon: str):
-    print(href)
     return rx.link(
-        text,
-        # rx.flex(
-        #     rx.icon_button(
-        #         lucide.icon(tag=icon, weight=16, height=16),
-        #         variant="soft",
-        #     ),
-        #     text,
-        #     py="2",
-        #     px="4",
-        #     gap="4",
-        #     align="baseline",
-        #     direction="row",
-        #     font_family=FONT_FAMILY,
-        # ),
+        rx.flex(
+            rx.icon_button(
+                rx.icon(tag=icon, weight=16, height=16),
+                variant="soft",
+            ),
+            text,
+            py="2",
+            px="4",
+            spacing="3",
+            align="baseline",
+            direction="row",
+            font_family=FONT_FAMILY,
+        ),
         href=href,
         width="100%",
         border_radius="8px",
@@ -73,9 +71,11 @@ def sidebar(
     heading="REFLEX",
 )
 
+
 class State(rx.State):
     pass
 
+
 def navbar(heading: str) -> rx.Component:
     return rx.hstack(
         rx.heading(heading, font_family=FONT_FAMILY, size="7"),

diff --git a/dashboard/pages/index.py b/dashboard/pages/index.py
@@ -17,16 +17,18 @@
     stat_card,
     table,
 )
-from dashboard.navigation import dashboard_sidebar, navbar
-from dashboard.styles import BACKGROUND_COLOR, FONT_FAMILY
-
+from dashboard.navigation import navbar
+from dashboard.template import template
 
 # Content in a grid layout.
 
 
 def content_grid():
     return rx.chakra.grid(
-        *[rx.chakra.grid_item(stat_card(*c), col_span=1, row_span=1) for c in stat_card_data],
+        *[
+            rx.chakra.grid_item(stat_card(*c), col_span=1, row_span=1)
+            for c in stat_card_data
+        ],
         rx.chakra.grid_item(
             line_chart(data=line_chart_data, data_key="name", lines=lines),
             col_span=3,
@@ -43,29 +45,21 @@ def content_grid():
             col_span=3,
             row_span=2,
         ),
-        rx.chakra.grid_item(col_span=2, bg="lightgreen"),
-        rx.chakra.grid_item(col_span=2, bg="yellow"),
-        rx.chakra.grid_item(col_span=4, bg="orange"),
         template_columns="repeat(4, 1fr)",
         width="100%",
         gap=4,
         row_gap=8,
     )
 
 
+@template
 def index() -> rx.Component:
     return rx.box(
-        dashboard_sidebar,
-        rx.box(
             navbar(heading="Dashboard"),
             rx.box(
                 content_grid(),
                 margin_top="calc(50px + 2em)",
                 padding="2em",
             ),
             padding_left="250px",
-        ),
-        background_color=BACKGROUND_COLOR,
-        font_family=FONT_FAMILY,
-        padding_bottom="4em",
-    )
+        )
diff --git a/dashboard/pages/team.py b/dashboard/pages/team.py
@@ -1,22 +1,17 @@
 import reflex as rx
 
-from dashboard.navigation import dashboard_sidebar, navbar
-from dashboard.styles import BACKGROUND_COLOR, FONT_FAMILY
-
+from dashboard.navigation import navbar
+from dashboard.template import template
 
+@template
 def team() -> rx.Component:
     return rx.box(
-        dashboard_sidebar,
-        rx.box(
             navbar(heading="Team"),
             rx.box(
                 rx.text("placeholder"),
                 margin_top="calc(50px + 2em)",
                 padding="2em",
             ),
             padding_left="250px",
-        ),
-        background_color=BACKGROUND_COLOR,
-        font_family=FONT_FAMILY,
-        padding_bottom="4em",
-    )
+        )
+
diff --git a/dashboard/pages/tools.py b/dashboard/pages/tools.py
@@ -1,22 +1,16 @@
 import reflex as rx
 
-from dashboard.navigation import dashboard_sidebar, navbar
-from dashboard.styles import BACKGROUND_COLOR, FONT_FAMILY
-
+from dashboard.navigation import navbar
+from dashboard.template import template
 
+@template
 def tools() -> rx.Component:
     return rx.box(
-        dashboard_sidebar,
-        rx.box(
             navbar(heading="Tools"),
             rx.box(
                 rx.text("placeholder"),
                 margin_top="calc(50px + 2em)",
                 padding="2em",
             ),
             padding_left="250px",
-        ),
-        background_color=BACKGROUND_COLOR,
-        font_family=FONT_FAMILY,
-        padding_bottom="4em",
-    )
+        )
diff --git a/dashboard/template.py b/dashboard/template.py
@@ -0,0 +1,17 @@
+from typing import Callable
+
+import reflex as rx
+
+from dashboard.navigation import dashboard_sidebar
+from dashboard.styles import BACKGROUND_COLOR, FONT_FAMILY
+
+
+def template(page: Callable[[], rx.Component]) -> rx.Component:
+    return rx.box(
+        dashboard_sidebar,
+        page(),
+        rx.logo(),
+        background_color=BACKGROUND_COLOR,
+        font_family=FONT_FAMILY,
+        padding_bottom="4em",
+    )
diff --git a/rxconfig.py b/rxconfig.py
@@ -2,4 +2,4 @@
 
 config = rx.Config(
     app_name="dashboard",
-)
+)
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,4 +2,4 @@ @@
     config = rx.Config(
         app_name="dashboard",
-    )
+    )