def Gallery():
index, set_index = hooks.use_state(0)
def handle_click(event):
set_index(index + 1)
bounded_index = index % len(sculpture_data)
sculpture = sculpture_data[bounded_index]
alt = sculpture["alt"]
artist = sculpture["artist"]
description = sculpture["description"]
name = sculpture["name"]
url = sculpture["url"]
return html.div(
html.button({"onClick": handle_click}, "Next"),
html.h2(name, " by ", artist),
html.p(f"({bounded_index + 1} of {len(sculpture_data)})"),
html.img({
"src": url,
"alt": alt,
"style": {
"height": "200px"
}
}),
html.p(description),
)
def Photo(alt_text, image_id):
return html.img({
"src": f"https://picsum.photos/id/{image_id}/500/200",
"style": {
"width": "50%"
},
"alt": alt_text,
})
def Photo():
return html.img({
"src": "https://picsum.photos/id/237/500/300",
"style": {
"width": "50%"
},
"alt": "Puppy",
})
def Photo():
return html.img({
"src": "https://picsum.photos/id/274/500/300",
"style": {
"width": "30%"
},
"alt": "Ray Charles",
})
def Gallery():
index, set_index = hooks.use_state(0)
show_more, set_show_more = hooks.use_state(False)
def handle_next_click(event):
set_index(index + 1)
def handle_more_click(event):
set_show_more(not show_more)
bounded_index = index % len(sculpture_data)
sculpture = sculpture_data[bounded_index]
alt = sculpture["alt"]
artist = sculpture["artist"]
description = sculpture["description"]
name = sculpture["name"]
url = sculpture["url"]
return html.div(
html.button({"onClick": handle_next_click}, "Next"),
html.h2(name, " by ", artist),
html.p(f"({bounded_index + 1} or {len(sculpture_data)})"),
html.img({
"src": url,
"alt": alt,
"style": {
"height": "200px"
}
}),
html.div(
html.button(
{"onClick": handle_more_click},
f"{'Show' if show_more else 'Hide'} details",
),
(html.p(description) if show_more else ""),
),
)
def MyTodoList():
return html.div(
html.h1("My Todo List"),
html.img({"src": "https://picsum.photos/id/0/500/300"}),
html.ul(html.li("The first thing I need to do is...")),
)