BlurMe/blurme/pages/settings.py

"""The settings page."""
import asyncio
from blurme.templates import template
from blurme.state import State

import reflex as rx


color = "rgb(107,99,246)"

@template(route="/settings", title="Zdjęcie", image = "/image-icon.png")
def settings() -> rx.Component:
   return rx.vstack(
        rx.heading("BlurMe", font_size="3em", margin_bottom="25px", background_image="linear-gradient(271.68deg, #7566fe 0.75%, #f96caf 88.52%)", background_clip="text", padding = "10px"),
        rx.text("Dodaj zdjęcie, które chcesz zanonimizować", font_size="1.2em"),
        rx.upload(
            rx.vstack(rx.text("Drag and drop files here or click to select files"),),
            border=f"1px dotted {color}",
            padding="5em",),
        rx.hstack(rx.foreach(rx.selected_files, rx.text)),
        rx.button( "Upload",
            on_click=lambda: State.handle_upload(
            rx.upload_files()),),
        rx.button("Clear",
            on_click=rx.clear_selected_files),
        rx.foreach(
            State.img, lambda img: rx.image(src=f'/{img}')),
        padding="5em",
    )