import gradio as gr

# Define menu items
menu_items = [
    {"name": "Chicken Butter Masala"},
    {"name": "Chicken Biryani"},
    {"name": "Dosa"},
    {"name": "Aloo Curry"},
]

# Create the Gradio interface
def render_menu():
    with gr.Blocks(css="""
    .menu-item {
        border: 2px solid black;
        border-radius: 5px;
        padding: 15px;
        margin: 10px 0;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        background-color: #fff;
    }
    .menu-container {
        margin-top: 20px;
    }
    """) as demo:
        gr.Markdown("# Menu")

        with gr.Column(elem_id="menu-container"):
            for item in menu_items:
                with gr.Row(elem_classes=["menu-item"]):  # Use elem_classes for custom styling
                    gr.Markdown(item["name"])

    return demo

# Render the app
demo = render_menu()
demo.launch()