2024 Dec 30: new code

Signed-off-by: Milind Kamat <36366961+milindkamat0507@users.noreply.github.com>

app.py

@@ -1,8 +1,85 @@
-def render_help_section(self, col):
+import streamlit as st
+
+class StreamlitTutorial:
+    def __init__(self):
+        st.set_page_config(page_title="Learn Streamlit", layout="wide")
+        self.init_session_state()
+        self.setup_styles()
+
+    def init_session_state(self):
+        if 'code_input' not in st.session_state:
+            st.session_state.code_input = ""
+            st.session_state.current_topic = "Basic Text Elements"
+
+    def setup_styles(self):
+        st.markdown("""
+        <style>
+        .code-example { 
+            margin-bottom: 1.5rem;
+        }
+        .live-output {
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            padding: 1rem;
+            margin: 0.5rem 0 1.5rem 0;
+        }
+        .section-title {
+            margin-bottom: 1rem;
+            padding: 0.5rem 0;
+        }
+        .button-container {
+            display: flex;
+            justify-content: space-between;
+            gap: 1rem;
+        }
+        </style>
+        """, unsafe_allow_html=True)
+
+    def get_text_elements(self):
+        return [
+            ("Title", "st.title('Main Title')"),
+            ("Header", "st.header('Header')"),
+            ("Subheader", "st.subheader('Subheader')"),
+            ("Normal text", "st.write('Normal text')"),
+            ("Markdown text", "st.markdown('**Bold** and *italic*')"),
+            ("Colored text", "st.markdown(':blue[Blue text]')")
+        ]
+
+    def get_input_elements(self):
+        return [
+            ("Text Input", "name = st.text_input('Enter your name')"),
+            ("Number Input", "num = st.number_input('Enter a number', min_value=0, max_value=100)"),
+            ("Slider", "value = st.slider('Select value', 0, 100, 50)"),
+            ("Selectbox", "option = st.selectbox('Choose option', ['A', 'B', 'C'])"),
+            ("Checkbox", "checked = st.checkbox('Enable feature')")
+        ]
+
+    def render_text_elements(self, col):
+        with col:
+            st.markdown("### 📝 Code Examples")
+            for title, code in self.get_text_elements():
+                with st.container(border=True):
+                    st.markdown(f"**{title}**")
+                    st.code(code)
+                    st.markdown("Live output:")
+                    with st.container(border=True):
+                        exec(code)
+
+    def render_input_elements(self, col):
+        with col:
+            st.markdown("### 📝 Code Examples")
+            for title, code in self.get_input_elements():
+                with st.container(border=True):
+                    st.markdown(f"**{title}**")
+                    st.code(code)
+                    st.markdown("Live output:")
+                    with st.container(border=True):
+                        exec(code)
+
+    def render_help_section(self, col):
         with col:
             st.markdown("### 📚 Learning Guide")
             
-            # Different help topics in expandable sections
             with st.expander("🎯 Basic Concepts", expanded=True):
                 st.markdown("""
                 **What are Text Elements?**
@@ -98,6 +175,83 @@ def render_help_section(self, col):
                 ```
                 """)
 
+    def render_playground(self, col, snippets):
+        with col:
+            st.markdown("### 💻 Practice Playground")
+            
+            # Code input area
+            code_input = st.text_area(
+                "Try Streamlit commands:",
+                value=st.session_state.code_input,
+                height=200,
+                placeholder="Example:\nst.title('My Title')"
+            )
+
+            # Quick Snippets with better alignment
+            with st.container(border=True):
+                st.markdown("#### 📚 Quick Snippets")
+                
+                cols = st.columns([4, 1])
+                with cols[0]:
+                    selected_snippet = st.selectbox(
+                        "Choose snippet:",
+                        list(snippets.keys()),
+                        label_visibility="collapsed"
+                    )
+                with cols[1]:
+                    if st.button("Add", use_container_width=True):
+                        new_code = snippets[selected_snippet]
+                        if code_input:
+                            code_input += f"\n{new_code}"
+                        else:
+                            code_input = new_code
+                        st.session_state.code_input = code_input
+
+            # Control buttons
+            col1, col2, col3 = st.columns(3)
+            with col1:
+                if st.button("▶️ Run", use_container_width=True):
+                    st.session_state.code_input = code_input
+            with col2:
+                if st.button("🔄 Reset", use_container_width=True):
+                    st.session_state.code_input = ""
+                    code_input = ""
+            with col3:
+                if st.button("💾 Copy", use_container_width=True):
+                    st.code(code_input)
+
+            # Live output
+            st.markdown("#### 🎨 Live Output")
+            with st.container(border=True):
+                if code_input:
+                    try:
+                        exec(code_input)
+                    except Exception as e:
+                        st.error(f"Error: {str(e)}")
+
+            # Tips
+            with st.expander("💡 Tips & Help"):
+                st.markdown(self.get_topic_tips(st.session_state.current_topic))
+
+    def get_topic_tips(self, topic):
+        tips = {
+            "Basic Text Elements": """
+                **Quick Tips:**
+                - Use markdown for formatting
+                - Try different header levels
+                - Combine text elements
+                - Use colored text with :color[text]
+            """,
+            "Input Widgets": """
+                **Quick Tips:**
+                - Use unique keys for widgets
+                - Store widget values in variables
+                - Add validation for inputs
+                - Combine widgets for complex inputs
+            """
+        }
+        return tips.get(topic, "Tips coming soon!")
+
     def run(self):
         with st.sidebar:
             st.title("Streamlit Tutorial")
@@ -110,5 +264,15 @@ def render_help_section(self, col):
         if st.session_state.current_topic == "Basic Text Elements":
             cols = st.columns([1.2, 1, 1])
             self.render_text_elements(cols[0])
-            self.render_help_section(cols[1])  # New help section in middle
-            self.render_playground(cols[2], dict(self.get_text_elements()))
+            self.render_help_section(cols[1])
+            self.render_playground(cols[2], dict(self.get_text_elements()))
+            
+        elif st.session_state.current_topic == "Input Widgets":
+            cols = st.columns([1.2, 1, 1])
+            self.render_input_elements(cols[0])
+            self.render_help_section(cols[1])
+            self.render_playground(cols[2], dict(self.get_input_elements()))
+
+if __name__ == "__main__":
+    app = StreamlitTutorial()
+    app.run()