[Pynecone] 2.gallery-to-do

import pynecone as pc

class State(pc.State):
    items = ['Write Code', 'Sleep', 'Have Fun']
    new_item:str = ""
    input_string:str = "" #초기화용

    def add_item(self):
        self.items += [self.new_item]
        self.new_item = ""

    def remove_item(self, item):
        self.items.remove(item)
        self.items = [i for i in self.items]

    def clear_input(self):
        self.input_string = ""
        
def render_item(item):
    return pc.list_item(
        pc.hstack(
            pc.button(
                on_click = lambda : State.remove_item(item), 
                bg="white", 
                border="1px solid blue",
                height = "1em"
            ),
            pc.text(item)
        ),
        font_size = "1em",
    )   

def index():
	return pc.container(
        pc.vstack(
            pc.heading("Todos"),
            pc.input(
                value=State.input_string,
                placeholder="Add a todo...",
                on_change=State.set_input_string,
                on_blur=State.set_new_item,
                bg="white"
            ),
            pc.button("Add", on_click=State.add_item, bg="white", on_mouse_up=State.clear_input), #<= onclick -> on_mouse_up 실행됨
            pc.divider(),
            pc.ordered_list(
                pc.foreach(State.items, lambda item : render_item(item)) 
            ),
            bg = "#eeeeee",
            border_radius = "1em",
            padding = "1em",
            margin = "1em",
            shadow="lg",
        ),
        bg = "black",
        border_radius="1em",
    )
		

app = pc.App(state=State)
app.add_page(index)
app.compile()