Spaces:
Sleeping
Sleeping
| from reactpy import component, html, svg, hooks | |
| from reactpy.core.hooks import use_ref | |
| 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) | |
| logo_section_ref = use_ref(None) | |
| start_over_ref = use_ref(None) | |
| if logo_section_ref.current is None: | |
| logo_section_ref.current = 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}" | |
| ), | |
| ) | |
| if start_over_ref.current is None: | |
| start_over_ref.current = 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?" | |
| ) | |
| ) | |
| return html.header( | |
| { | |
| "style": { | |
| "backgroundColor": "#FFFFFF", | |
| "display": "flex", | |
| "justifyContent": "space-between", | |
| "alignItems": "center", | |
| } | |
| }, | |
| logo_section_ref.current, | |
| 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", | |
| } | |
| ) | |
| ) | |
| ) | |
| ), | |
| start_over_ref.current | |
| ) |