Skip to content

Commit 5ab6093

Browse files
8 - Better Code Management
1 parent a08f847 commit 5ab6093

4 files changed

Lines changed: 107 additions & 101 deletions

File tree

full_stack_python/full_stack_python.py

Lines changed: 1 addition & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
from rxconfig import config
66

7+
from .ui.base import base_page
78

89
class State(rx.State):
910
"""The app state."""
@@ -15,107 +16,6 @@ def handle_title_input_change(self, val):
1516
def did_click(self):
1617
print("Hello world did click")
1718

18-
def navbar_link(text: str, url: str) -> rx.Component:
19-
return rx.link(
20-
rx.text(text, size="4", weight="medium"), href=url
21-
)
22-
23-
24-
def navbar() -> rx.Component:
25-
return rx.box(
26-
rx.desktop_only(
27-
rx.hstack(
28-
rx.hstack(
29-
rx.image(
30-
src="/logo.jpg",
31-
width="2.25em",
32-
height="auto",
33-
border_radius="25%",
34-
),
35-
rx.heading(
36-
"Reflex", size="7", weight="bold"
37-
),
38-
align_items="center",
39-
),
40-
rx.hstack(
41-
navbar_link("Home", "/#"),
42-
navbar_link("About", "/#"),
43-
navbar_link("Pricing", "/#"),
44-
navbar_link("Contact", "/#"),
45-
spacing="5",
46-
),
47-
rx.hstack(
48-
rx.button(
49-
"Sign Up",
50-
size="3",
51-
variant="outline",
52-
),
53-
rx.button("Log In", size="3"),
54-
spacing="4",
55-
justify="end",
56-
),
57-
justify="between",
58-
align_items="center",
59-
),
60-
),
61-
rx.mobile_and_tablet(
62-
rx.hstack(
63-
rx.hstack(
64-
rx.image(
65-
src="/logo.jpg",
66-
width="2em",
67-
height="auto",
68-
border_radius="25%",
69-
),
70-
rx.heading(
71-
"Reflex", size="6", weight="bold"
72-
),
73-
align_items="center",
74-
),
75-
rx.menu.root(
76-
rx.menu.trigger(
77-
rx.icon("menu", size=30)
78-
),
79-
rx.menu.content(
80-
rx.menu.item("Home"),
81-
rx.menu.item("About"),
82-
rx.menu.item("Pricing"),
83-
rx.menu.item("Contact"),
84-
rx.menu.separator(),
85-
rx.menu.item("Log in"),
86-
rx.menu.item("Sign up"),
87-
),
88-
justify="end",
89-
),
90-
justify="between",
91-
align_items="center",
92-
),
93-
),
94-
bg=rx.color("accent", 3),
95-
padding="1em",
96-
# position="fixed",
97-
# top="0px",
98-
# z_index="5",
99-
width="100%",
100-
)
101-
102-
def base_page(child: rx.Component, hide_navbar=False, *args, **kwargs) -> rx.Component:
103-
# print([type(x) for x in args])
104-
if not isinstance(child,rx. Component):
105-
child = rx.heading("this is not a valid child element")
106-
if hide_navbar:
107-
return rx.container(
108-
child,
109-
rx.logo(),
110-
rx.color_mode.button(position="bottom-left"),
111-
)
112-
return rx.container(
113-
navbar(),
114-
child,
115-
rx.logo(),
116-
rx.color_mode.button(position="bottom-left"),
117-
)
118-
11919
def index() -> rx.Component:
12020
# Welcome Page (Index)
12121
return base_page(

full_stack_python/ui/__init__.py

Whitespace-only changes.

full_stack_python/ui/base.py

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import reflex as rx
2+
3+
from .nav import navbar
4+
5+
def base_page(child: rx.Component, hide_navbar=False, *args, **kwargs) -> rx.Component:
6+
# print([type(x) for x in args])
7+
if not isinstance(child,rx. Component):
8+
child = rx.heading("this is not a valid child element")
9+
if hide_navbar:
10+
return rx.container(
11+
child,
12+
rx.logo(),
13+
rx.color_mode.button(position="bottom-left"),
14+
)
15+
return rx.container(
16+
navbar(),
17+
child,
18+
rx.logo(),
19+
rx.color_mode.button(position="bottom-left"),
20+
)

full_stack_python/ui/nav.py

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import reflex as rx
2+
3+
def navbar_link(text: str, url: str) -> rx.Component:
4+
return rx.link(
5+
rx.text(text, size="4", weight="medium"), href=url
6+
)
7+
8+
9+
def navbar() -> rx.Component:
10+
return rx.box(
11+
rx.desktop_only(
12+
rx.hstack(
13+
rx.hstack(
14+
rx.image(
15+
src="/logo.jpg",
16+
width="2.25em",
17+
height="auto",
18+
border_radius="25%",
19+
),
20+
rx.heading(
21+
"Reflex", size="7", weight="bold"
22+
),
23+
align_items="center",
24+
),
25+
rx.hstack(
26+
navbar_link("Home", "/#"),
27+
navbar_link("About", "/#"),
28+
navbar_link("Pricing", "/#"),
29+
navbar_link("Contact", "/#"),
30+
spacing="5",
31+
),
32+
rx.hstack(
33+
rx.button(
34+
"Sign Up",
35+
size="3",
36+
variant="outline",
37+
),
38+
rx.button("Log In", size="3"),
39+
spacing="4",
40+
justify="end",
41+
),
42+
justify="between",
43+
align_items="center",
44+
),
45+
),
46+
rx.mobile_and_tablet(
47+
rx.hstack(
48+
rx.hstack(
49+
rx.image(
50+
src="/logo.jpg",
51+
width="2em",
52+
height="auto",
53+
border_radius="25%",
54+
),
55+
rx.heading(
56+
"Reflex", size="6", weight="bold"
57+
),
58+
align_items="center",
59+
),
60+
rx.menu.root(
61+
rx.menu.trigger(
62+
rx.icon("menu", size=30)
63+
),
64+
rx.menu.content(
65+
rx.menu.item("Home"),
66+
rx.menu.item("About"),
67+
rx.menu.item("Pricing"),
68+
rx.menu.item("Contact"),
69+
rx.menu.separator(),
70+
rx.menu.item("Log in"),
71+
rx.menu.item("Sign up"),
72+
),
73+
justify="end",
74+
),
75+
justify="between",
76+
align_items="center",
77+
),
78+
),
79+
bg=rx.color("accent", 3),
80+
padding="1em",
81+
# position="fixed",
82+
# top="0px",
83+
# z_index="5",
84+
width="100%",
85+
)
86+

0 commit comments

Comments
 (0)