import solara

github_url = solara.util.github_url(__file__)
# some app state that outlives a single page
app_state = solara.reactive(0)


@solara.component
def SharedComponent():
    with solara.Card("Shown on each page", style={"max-width": "500px"}, margin=0, classes=["my-2"]):
        solara.Markdown(
            f"""
            This component will be used on each page.

            It uses the `app_state` [reactive variable](https://solara.dev/documentation/api/utilities/reactive)
            so that the state outlives each page


            app_state: {app_state.value}
            """
        )
        solara.Button(label="Increment app_state", icon_name="mdi-plus", on_click=lambda: app_state.set(app_state.value + 1), outlined=True)


@solara.component
def Page():
    with solara.Sidebar():
        solara.Markdown("This is the sidebar at the home page!")
    with solara.Card("Home"):
        solara.Markdown("This is the home page")
        solara.Button(label="View source", icon_name="mdi-github-circle", attributes={"href": github_url, "target": "_blank"}, text=True, outlined=True)

        SharedComponent()


@solara.component
def Layout(children):
    return solara.AppLayout(children=children)
