import streamlit as st

st.set_page_config(page_title="8 Dimensions of Self Care", page_icon=":heart:")

def mermaid(code: str) -> None:
    components.html(
        f"""
        <pre class="mermaid">
            {code}
        </pre>

        <script type="module">
            import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
            mermaid.initialize({{ startOnLoad: true }});
        </script>
        """
    )


st.title("8 Dimensions of Self Care")

mermaid_chart = '''
graph TD
    A[🌱 Emotional, How we feel] --> B[🔮 Self Care]
    C[🙏 Spiritual, Our beliefs] --> B
    D[💰 Financial, How we manage money] --> B
    E[💡 Cognitive, How we think] --> B
    F[🎯 Aptitudinal, Our abilities] --> B
    G[🤝 Relational, Our connections] --> B
    H[🌍 Environmental, Our surroundings] --> B
    I[🏃‍♂️ Physical, Our bodies] --> B
'''


mermaid(mermaid_chart)
#mermaid(mermaid_chart, width="100%")