|
from reactpy import component, html, svg, hooks |
|
|
|
@component |
|
def Header(demo_name: str, short_description: str, extra_info: str, start_over): |
|
more_info, set_more_info = hooks.use_state(False) |
|
|
|
def toggle_header(event=None): |
|
set_more_info(not more_info) |
|
|
|
return html.header( |
|
{ |
|
"style": { |
|
"backgroundColor": "#FFFFFF", |
|
"display": "flex", |
|
"justifyContent": "space-between", |
|
"alignItems": "center", |
|
} |
|
}, |
|
html.div( |
|
{ |
|
"style": { |
|
"display": "flex", |
|
"alignItems": "center", |
|
"flex": 2, |
|
"textAlign": "left", |
|
"padding": "10px", |
|
} |
|
}, |
|
html.img( |
|
{ |
|
"src": "https://avatars.githubusercontent.com/u/108304503?s=200&v=4", |
|
"style": { |
|
"height": "30px", |
|
"marginRight": "15px", |
|
"marginLeft": "5px", |
|
"transform": "translateY(-2px)", |
|
} |
|
} |
|
), |
|
html.p( |
|
{ |
|
"style": { |
|
"fontSize": "25px", |
|
"fontFamily": "Georgia, 'Times New Roman', Times, serif", |
|
} |
|
}, |
|
f"{demo_name}" |
|
), |
|
), |
|
html.div( |
|
{ |
|
"style": { |
|
"flex": 5, |
|
"textAlign": "center", |
|
"padding": "10px 0px 15px 0px", |
|
"fontFamily": "Lato", |
|
"position": "relative", |
|
} |
|
}, |
|
html.h3(f"Welcome to the {demo_name} Demo"), |
|
html.p( |
|
short_description, |
|
html.button( |
|
{ |
|
"style": { |
|
"display": "inline" if not more_info else "none", |
|
"backgroundColor": "#FFFFFF", |
|
"color": "#757575", |
|
"fontSize": "13px", |
|
"cursor": "pointer", |
|
"border": "none", |
|
"padding": "0px 0px 0px 5px", |
|
}, |
|
"type": "button", |
|
"onClick": toggle_header, |
|
}, |
|
html.u( |
|
{ |
|
"style": { |
|
"flex": 2, |
|
"textAlign": "right", |
|
"padding": "10px", |
|
} |
|
}, |
|
"Learn More" |
|
) |
|
), |
|
f" {extra_info}" if more_info else "" |
|
), |
|
html.button( |
|
{ |
|
"style": { |
|
"display": "block" if more_info else "none", |
|
"background": "none", |
|
"border": "none", |
|
"color": "#757575", |
|
"cursor": "pointer", |
|
"position": "absolute", |
|
"left": "50%", |
|
"transform": "translateX(-50%)", |
|
"bottom": "1px", |
|
}, |
|
"type": "button", |
|
"on_click": toggle_header, |
|
}, |
|
svg.svg( |
|
{ |
|
"width": "20", |
|
"height": "20", |
|
"viewBox": "0 0 20 20", |
|
"fill": "none", |
|
"stroke": "black", |
|
"strokeWidth": "2", |
|
"strokeLinecap": "round", |
|
"strokeLinejoin": "round", |
|
}, |
|
svg.path( |
|
{ |
|
"d": "M12 19V5M5 12l7-7 7 7", |
|
"stroke": "currentColor", |
|
} |
|
) |
|
) |
|
) |
|
), |
|
html.div( |
|
{ |
|
"style": { |
|
"flex": 2, |
|
"textAlign": "right", |
|
"padding": "10px", |
|
} |
|
}, |
|
html.button( |
|
{ |
|
"style": { |
|
"backgroundColor": "#FFFFFF", |
|
"color": "#757575", |
|
"fontSize": "14px", |
|
"cursor": "pointer", |
|
"border": "1px solid #e2dfdf", |
|
"borderRadius": "5px", |
|
"padding": "6px 20px", |
|
"marginRight": "15px", |
|
}, |
|
"type": "button", |
|
"onClick": start_over, |
|
}, |
|
"Start Over?" |
|
) |
|
) |
|
) |
