2024 Dec 30 new playground added

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

app.py

@@ -13,117 +13,98 @@ with st.sidebar:
             "Layouts & Containers", 
             "Data Display",
             "Charts & Plots",
-            "Interactive Components",
-            "Playground"
+            "Interactive Components"
         ]
     )
 
 if selected_topic == "Basic Text Elements":
     st.title("Basic Text Elements in Streamlit")
-    
-    # Create two equal columns
-    col1, col2 = st.columns(2)
-    
-    with col1:
-        st.markdown("### 📝 Code Examples")
-        # Code section with comments
-        st.markdown("#### Title")
-        st.code("st.title('Main Title')")
-        st.markdown("↳")  # Arrow pointing to output
-        
-        st.markdown("#### Header")
-        st.code("st.header('Header')")
-        st.markdown("↳")
-        
-        st.markdown("#### Subheader")
-        st.code("st.subheader('Subheader')")
-        st.markdown("↳")
-        
-        st.markdown("#### Normal text")
-        st.code("st.write('Normal text')")
-        st.markdown("↳")
-        
-        st.markdown("#### Markdown text")
-        st.code("st.markdown('**Bold** and *italic*')")
-        st.markdown("↳")
-        
-        st.markdown("#### Colored text")
-        st.code("st.markdown(':blue[Blue text]')")
-        st.markdown("↳")
 
-    with col2:
-        st.markdown("### 🎯 Live Output")
-        st.title('Main Title')
-        st.markdown("---")  # Separator
-        
-        st.header('Header')
-        st.markdown("---")
-        
-        st.subheader('Subheader')
-        st.markdown("---")
-        
-        st.write('Normal text')
-        st.markdown("---")
+    # Create two main sections: Learning and Practice
+    learning_col, practice_col = st.columns([1.2, 0.8])
+
+    # Learning Section (Code Examples + Live Output)
+    with learning_col:
+        st.markdown("### 📚 Learning Section")
         
-        st.markdown('**Bold** and *italic*')
-        st.markdown("---")
+        # Create two sub-columns for code and output
+        code_col, output_col = st.columns(2)
         
-        st.markdown(':blue[Blue text]')
+        with code_col:
+            st.markdown("#### 📝 Code Examples")
+            
+            st.markdown("**Title**")
+            st.code("st.title('Main Title')")
+            
+            st.markdown("**Header**")
+            st.code("st.header('Header')")
+            
+            st.markdown("**Subheader**")
+            st.code("st.subheader('Subheader')")
+            
+            st.markdown("**Normal text**")
+            st.code("st.write('Normal text')")
+            
+            st.markdown("**Markdown text**")
+            st.code("st.markdown('**Bold** and *italic*')")
+            
+            st.markdown("**Colored text**")
+            st.code("st.markdown(':blue[Blue text]')")
 
-elif selected_topic == "Playground":
-    st.title("💻 Streamlit Playground")
-    
-    # Split screen for code and output
-    col1, col2 = st.columns([1, 1])
-    
-    with col1:
-        st.markdown("### ✍️ Write Your Code")
-        code = st.text_area(
-            "Try Streamlit commands here:",
-            height=400,
-            placeholder="""Examples to try:
+        with output_col:
+            st.markdown("#### 🎯 Live Output")
+            with st.container(border=True):
+                st.title('Main Title')
+                st.header('Header')
+                st.subheader('Subheader')
+                st.write('Normal text')
+                st.markdown('**Bold** and *italic*')
+                st.markdown(':blue[Blue text]')
 
-st.title('My Title')
-st.write('Hello World!')
-st.markdown('**Bold** and *italic*')
-st.markdown(':blue[Colored text]')
-            """
-        )
-        
-        # Add helpful snippets
-        st.markdown("#### 📚 Quick Snippets")
-        snippets = {
-            "Title": "st.title('My Title')",
-            "Header": "st.header('My Header')",
-            "Colored Text": "st.markdown(':blue[Blue text]')",
-            "Bold & Italic": "st.markdown('**Bold** and *italic*')",
-        }
+    # Practice Section (Playground)
+    with practice_col:
+        st.markdown("### 💻 Practice Playground")
         
-        selected_snippet = st.selectbox("Insert a snippet:", list(snippets.keys()))
-        if st.button("Insert Snippet"):
-            if code:
-                code += "\n" + snippets[selected_snippet]
-            else:
-                code = snippets[selected_snippet]
-    
-    with col2:
-        st.markdown("### 🎯 Live Output")
         with st.container(border=True):
-            if code:
-                try:
-                    exec(code)
-                except Exception as e:
-                    st.error(f"Error: {str(e)}")
+            code = st.text_area(
+                "Try Streamlit commands:",
+                height=200,
+                placeholder="Example:\nst.title('My Title')"
+            )
+            
+            st.markdown("#### Quick Snippets")
+            snippets = {
+                "Title": "st.title('My Title')",
+                "Header": "st.header('My Header')",
+                "Colored Text": "st.markdown(':blue[Blue text]')",
+                "Bold & Italic": "st.markdown('**Bold** and *italic*')",
+            }
+            
+            col1, col2 = st.columns([2, 1])
+            with col1:
+                selected_snippet = st.selectbox("Insert:", list(snippets.keys()))
+            with col2:
+                if st.button("Add Snippet"):
+                    if code:
+                        code += "\n" + snippets[selected_snippet]
+                    else:
+                        code = snippets[selected_snippet]
+            
+            st.markdown("#### Output")
+            with st.container(border=True):
+                if code:
+                    try:
+                        exec(code)
+                    except Exception as e:
+                        st.error(f"Error: {str(e)}")
 
-# Tips & Documentation
+# Tips Section
 with st.expander("💡 Tips & Tricks"):
     st.markdown("""
-    ### Helpful Tips:
-    - Start with basic text elements (`st.write`, `st.markdown`)
-    - Use markdown for formatting (`**bold**`, `*italic*`)
-    - Try colored text with `:blue[text]`, `:red[text]`, etc.
-    - Experiment with different header levels
-    - Watch the live output as you type
+    - Use `st.write()` for simple text output
+    - Use markdown for formatted text
+    - Try different header levels (title, header, subheader)
+    - Experiment with colored text using `:blue[text]`, `:red[text]`, etc.
     """)
 
 st.markdown("---")