components/sidebar.py

"""
Simplified sidebar component
"""

import gradio as gr


def create_sidebar(current_step):
    """Create a clean sidebar with progress steps"""
    
    with gr.Column(elem_classes="sidebar"):
        gr.Markdown("### Workflow", elem_classes="font-semibold")
        
        # Simple step indicators
        steps = [
            {"number": 1, "title": "Input Code", "description": "Provide your Python code"},
            {"number": 2, "title": "Generate", "description": "Create Gradio app files"},
            {"number": 3, "title": "Deploy", "description": "Deploy to Hugging Face"}
        ]
        
        step_html = '<div class="steps-container">'
        for step in steps:
            active = "active" if step["number"] == current_step.value else ""
            step_html += f'''
            <div class="step {active}">
                <span class="step-number">{step["number"]}</span>
                <span class="step-title">{step["title"]}</span>
                <div class="step-description">{step["description"]}</div>
            </div>
            '''
        step_html += '</div>'
        
        gr.HTML(step_html)
        
        # Simple tips
        gr.Markdown("### Tips", elem_classes="mt-4 font-semibold")
        
        tips_html = '''
        <div class="tips-container">
            <div class="tip">
                <svg class="tip-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
                </svg>
                <p>Ensure your code is well-structured for best results.</p>
            </div>
            <div class="tip">
                <svg class="tip-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                </svg>
                <p>API keys are used securely and not stored.</p>
            </div>
            <div class="tip">
                <svg class="tip-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"/>
                </svg>
                <p>One-click deployment to Hugging Face Spaces.</p>
            </div>
        </div>
        '''
        
        gr.HTML(tips_html)
        
        # Simple requirements
        gr.Markdown("### Requirements", elem_classes="mt-4 font-semibold")
        requirements_html = '''
        <div class="requirements">
            <ul>
                <li>Python 3.8+</li>
                <li>Groq API Key</li>
                <li>Hugging Face Account</li>
            </ul>
        </div>
        '''
        
        gr.HTML(requirements_html)