Counter App

from duck.html.components.container import FlexContainer
from duck.html.components.heading import Heading
from duck.html.components.button import Button
from duck.html.components.label import Label
from duck.html.components.page import Page


class HomePage(Page):
    def on_create(self):
        super().on_create()
        self.style["font-family"] = "system-ui"
        self.set_title("Simple Counter App")
        
        # Initialize counter
        self.counter = 0
        
        def on_btn_click(btn, *_):
            self.counter += 1
            self.label.text = self.counter
            
        # Container for components alignment
        self.container = FlexContainer()
        self.container.style["gap"] = "5px"
        self.container.style["flex-direction"] = "column"
        self.container.style["align-items"] = "center"
        self.container.style["justify-content"] = "center"
        self.container.style["padding"] = "20px"
        
        # Add topheading
        self.heading = Heading("h1", text="Counter App", color="green")
        self.container.add_child(self.heading)
        
        # Add label
        self.label = Label(text=self.counter)
        self.label.color = "black"
        self.label.style["font-size"] = "1.5rem"
        self.container.add_child(self.label)
        
        # Initialize button
        self.btn = Button(text="Increment")
        self.btn.color = "white"
        self.btn.bg_color = "green"
        self.btn.style["padding"] = "20px"
        self.btn.style["font-size"] = "1.2rem"
        
        # Bind button to onclick event
        self.btn.bind(
            "click",
            on_btn_click,
            update_targets=[self.label],
            update_self=False,
        )
        
        # Add button to container
        self.container.add_child(self.btn)
        
        # Add container to page's body
        self.add_to_body(self.container)