BlurMe/blurme/templates/template.py

102 lines
2.8 KiB
Python

"""Common templates used between pages in the app."""
from __future__ import annotations
from blurme import styles
from blurme.components.sidebar import sidebar
from typing import Callable
from blurme.state import State
import reflex as rx
# Meta tags for the app.
default_meta = [
{
"name": "viewport",
"content": "width=device-width, shrink-to-fit=no, initial-scale=1",
},
]
def dark_mode() -> rx.Component:
return rx.box(
rx.button(
rx.icon(
tag="moon",
size="4em",
color=styles.text_color,
),
on_click= rx.toggle_color_mode
#State.toggle_dark_mode()
),
position="fixed",
right="1.5em",
top="1.5em",
z_index="500",)
def template(
route: str | None = None,
title: str | None = None,
image: str | None = None,
image_dark: str | None = None,
description: str | None = None,
meta: str | None = None,
script_tags: list[rx.Component] | None = None,
on_load: rx.event.EventHandler | list[rx.event.EventHandler] | None = None,
) -> Callable[[Callable[[], rx.Component]], rx.Component]:
"""The template for each page of the app.
Args:
route: The route to reach the page.
title: The title of the page.
image: The favicon of the page.
image_dark: The dark mode favicon of the page.
description: The description of the page.
meta: Additional meta to add to the page.
on_load: The event handler(s) called when the page loads.
script_tags: Scripts to attach to the page.
Returns:
The template with the page content.
"""
def decorator(page_content: Callable[[], rx.Component]) -> rx.Component:
"""The template for each page of the app.
Args:
page_content: The content of the page.
Returns:
The template with the page content.
"""
# Get the meta tags for the page.
all_meta = [*default_meta, *(meta or [])]
@rx.page(
route=route,
title=title,
image=image,
description=description,
meta=all_meta,
script_tags=script_tags,
on_load=on_load,
)
def templated_page():
return rx.hstack(
sidebar(),
rx.box(
rx.box(
page_content(),
**styles.template_content_style,
),
**styles.template_page_style,
),
dark_mode(),
align_items="flex-start",
transition="left 0.5s, width 0.5s",
position="relative",
)
return templated_page
return decorator