components/buttons.py

import streamlit as st


def render_top_buttons(on_add_click, on_add_tab_click, on_reset_click) -> None:
    left_col, name_col, tab_col, reset_col = st.columns([0.12, 0.54, 0.18, 0.16])
    with left_col:
        st.markdown('<div class="primary-action">', unsafe_allow_html=True)
        st.button("+ Add Card", use_container_width=True, on_click=on_add_click)
        st.markdown("</div>", unsafe_allow_html=True)
    with name_col:
        st.text_input(
            "Tab name",
            key="new_tab_name",
            placeholder="New tab name",
            label_visibility="collapsed",
        )
    with tab_col:
        st.markdown('<div class="check-action">', unsafe_allow_html=True)
        st.button("+ Add Tab", use_container_width=True, on_click=on_add_tab_click)
        st.markdown("</div>", unsafe_allow_html=True)
    with reset_col:
        st.markdown('<div class="reset-action">', unsafe_allow_html=True)
        st.button("Reset", use_container_width=True, on_click=on_reset_click)
        st.markdown("</div>", unsafe_allow_html=True)