dashboard_components.py

# dashboard_components.py
import streamlit as st
from typing import Callable
import logging

logger = logging.getLogger(__name__)

def dashboard_header(logout_callback: Callable) -> None:
    """
    Recreates the DashboardHeader component functionality in Streamlit
    """
    # Container for header with custom styling
    with st.container():
        # Use columns for layout
        col1, col2 = st.columns([2, 2])
        
        with col1:
            # Title and author
            st.markdown("# Digital Inheritance Dashboard")
            st.markdown("<span style='color: gray; font-size: 0.8em'>by Muhammad Shaheer</span>", 
                       unsafe_allow_html=True)
        
        with col2:
            # Right-aligned buttons using columns
            button_cols = st.columns(3)
            with button_cols[0]:
                if st.button("🏦 Wallets", use_container_width=True):
                    st.session_state.page = 'wallets'
                    st.rerun()
            
            with button_cols[1]:
                if st.button("🔗 Link Accounts", use_container_width=True):
                    st.session_state.page = 'link_accounts'
                    st.rerun()
            
            with button_cols[2]:
                if st.button("🚪 Logout", type="secondary", use_container_width=True):
                    logout_callback()
    
    # Add separator
    st.markdown("---")

def account_linking_form() -> None:
    """
    Recreates the AccountLinking component functionality in Streamlit
    """
    st.markdown("## Link Social Media Account")
    
    # Create container for the form
    with st.container():
        # Platform selection using radio buttons with custom styling
        platform = st.radio(
            "Select Platform",
            options=["Facebook", "Twitter", "Instagram", "LinkedIn"],
            horizontal=True,
            format_func=lambda x: f"  {x}",
            key="platform_selection"
        )
        
        if platform:
            # Username input
            username = st.text_input(
                "Username",
                placeholder=f"Enter your {platform.lower()} username",
                key="username_input"
            )
            
            # Info message
            st.info(
                "ℹ️ We'll monitor this account for inactivity. "
                "Make sure the profile is public so we can track activity."
            )
            
            # Link button
            if st.button(
                "Link Account",
                disabled=not username,
                type="primary",
                use_container_width=True
            ):
                # Here you would integrate with your backend
                st.success(f"Linking {username} on {platform}")
                # Optional: Add loading state
                with st.spinner("Linking account..."):
                    # Simulate API call
                    import time
                    time.sleep(1)

def apply_custom_css():
    """
    Apply custom CSS to make the components look more like the original React design
    """
    st.markdown("""
        <style>
        /* Custom styling for the header */
        .stButton button {
            border-radius: 8px;
            padding: 0.5rem 1rem;
            border: 1px solid #e5e7eb;
        }
        
        /* Style for radio buttons to look more like the original design */
        .stRadio > label {
            font-weight: 600;
            margin-bottom: 1rem;
        }
        
        /* Container styling */
        .element-container {
            background-color: white;
            padding: 1rem;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        /* Input styling */
        .stTextInput input {
            border-radius: 8px;
            border: 1px solid #e5e7eb;
            padding: 0.5rem;
        }
        
        /* Info message styling */
        .stAlert {
            background-color: #EFF6FF;
            color: #1D4ED8;
            border-radius: 8px;
            padding: 1rem;
        }
        </style>
    """, unsafe_allow_html=True)

# Example usage in your main Streamlit app:
def main():
    # Initialize session state
    if 'page' not in st.session_state:
        st.session_state.page = 'dashboard'
    
    # Apply custom CSS
    apply_custom_css()
    
    def logout():
        st.session_state.clear()
        st.rerun()
    
    # Show header
    dashboard_header(logout)
    
    # Show different pages based on state
    if st.session_state.page == 'link_accounts':
        account_linking_form()
    # Add other pages as needed